<!-- JS -->
<script src="assets/libs/chart.js/chart.min.js"></script>
<!-- HTML -->
<canvas id="lineChart" width="300" height="300"></canvas>
<!-- Init js -->
var ctx1 = document.getElementById('lineChart').getContext('2d');
var myChart = new Chart(ctx1, {
type: 'line',
data: {
labels: ['Jan','Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Monthly Report',
data: [12, 19, 13, 9, 12, 11, 12, 19, 13, 9, 12, 11],
backgroundColor: [
'rgba(11, 81, 183, 0.1)',
],
borderColor: [
'rgba(11, 81, 183, 1)',
],
borderWidth: 2,
borderDash :[3],
borderJoinStyle: "round",
borderCapStyle: "round",
pointBorderColor: 'rgba(11, 81, 183, 1)',
pointRadius: 3,
pointBorderWidth: 1,
tension: 0.3,
},
{
label: 'Monthly Report',
data: [8, 12, 15, 11, 8, 14, 16, 13, 10, 7, 19, 16],
backgroundColor: [
'rgba(28, 202, 184, 0.1)',
],
borderColor: [
'rgba(28, 202, 184, 1)',
],
borderWidth: 2,
borderDash :[0],
borderJoinStyle: "round",
borderCapStyle: "round",
pointBorderColor: 'rgba(28, 202, 184, 1)',
pointRadius: 3,
pointBorderWidth: 1,
tension: 0.3,
}]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: '#7c8ea7',
}
}
} ,
scales: {
y: {
beginAtZero: true,
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return '$' + value;
},
color: '#7c8ea7',
},
grid: {
drawBorder: 'border',
color: 'rgba(132, 145, 183, 0.15)',
borderDash: [3],
borderColor: 'rgba(132, 145, 183, 0.15)',
} ,
beginAtZero: true,
},
x: {
ticks: {
color: '#7c8ea7',
},
grid: {
display: false,
color: 'rgba(132, 145, 183, 0.09)',
borderDash: [3],
borderColor: 'rgba(132, 145, 183, 0.09)',
}
}
},
}
});