-
Notifications
You must be signed in to change notification settings - Fork 3
/
example5.html
99 lines (94 loc) · 3.17 KB
/
example5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gradient Line Chart - Chart.js</title>
<style>
html, body{
background: #f1f1f1;
padding-top: 50px;
}
.wrapper{
width:60%;
display:block;
overflow:hidden;
margin:0 auto;
padding: 60px 50px;
background:#fff;
border-radius:4px;
}
canvas{
background:#fff;
}
</style>
</head>
<body>
<div class="wrapper">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext("2d");
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(1, "#f49080");
var gradientFill = ctx.createLinearGradient(500, 0, 100, 0);
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0.6)");
gradientFill.addColorStop(1, "rgba(244, 144, 128, 0.6)");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
datasets: [{
label: "Data",
borderColor: gradientStroke,
pointBorderColor: gradientStroke,
pointBackgroundColor: gradientStroke,
pointHoverBackgroundColor: gradientStroke,
pointHoverBorderColor: gradientStroke,
pointBorderWidth: 10,
pointHoverRadius: 10,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: true, // If true, fill the area under the line
backgroundColor: gradientFill, // Specify the background color to the chart area
borderWidth: 4,
data: [100, 120, 150, 170, 180, 170, 160]
}]
},
options: {
legend: {
position: "bottom"
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold",
beginAtZero: true, // If true, scale will include 0 if it is not already included.
maxTicksLimit: 5, // Maximum number of ticks and gridlines to show.
padding: 20 // Padding between the tick label and the axis.
},
gridLines: {
drawTicks: false, // If true, draw lines beside the ticks in the axis area beside the chart.
display: false
}
}],
xAxes: [{
gridLines: {
zeroLineColor: "transparent" // Stroke color of the grid line for the first index (index 0).
},
ticks: {
padding: 20,
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold"
}
}]
}
}
});
</script>
</body>
</html>