xxxxxxxxxx
1
<div class="container">
2
<!--Grid row-->
3
<div class="row d-flex justify-content-center mt-5">
4
5
<!--Grid column-->
6
<div class="col-md-10">
7
8
<canvas id="lineChart"></canvas>
9
10
</div>
11
<!--Grid column-->
12
13
</div>
14
<!--Grid row-->
15
</div>
xxxxxxxxxx
1
body {
2
background-color: #181C30;
3
}
xxxxxxxxxx
1
var ctxL = document.getElementById("lineChart").getContext('2d');
2
var gradientFill = ctxL.createLinearGradient(0, 0, 0, 290);
3
gradientFill.addColorStop(0, "rgba(173, 53, 186, 1)");
4
gradientFill.addColorStop(1, "rgba(173, 53, 186, 0.1)");
5
var myLineChart = new Chart(ctxL, {
6
type: 'line',
7
data: {
8
labels: ["January", "February", "March", "April", "May", "June", "July"],
9
datasets: [
10
{
11
label: "My First dataset",
12
data: [0, 65, 45, 65, 35, 65, 0],
13
backgroundColor: gradientFill,
14
borderColor: [
15
'#AD35BA',
16
],
17
borderWidth: 2,
18
pointBorderColor: "#fff",
19
pointBackgroundColor: "rgba(173, 53, 186, 0.1)",
20
}
21
]
22
},
23
options: {
24
responsive: true
25
}
26
});
Console errors: 0