Chart.js v2.7.0
Simple yet flexible JavaScript charting for designers & developers. Made by our friends from Charts.js. Please check the full documentation.
<!-- markup -->
<canvas id="chartHours"></canvas>
<!-- javascript init -->
chartColor = "#FFFFFF";
ctx = document.getElementById('chartHours').getContext("2d");
myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
datasets: [{
borderColor: "#6bd098",
backgroundColor: "#6bd098",
pointRadius: 0,
pointHoverRadius: 0,
borderWidth: 3,
data: [300, 310, 316, 322, 330, 326, 333, 345, 338, 354]
},
{
borderColor: "#f17e5d",
backgroundColor: "#f17e5d",
pointRadius: 0,
pointHoverRadius: 0,
borderWidth: 3,
data: [320, 340, 365, 360, 370, 385, 390, 384, 408, 420]
},
{
borderColor: "#fcc468",
backgroundColor: "#fcc468",
pointRadius: 0,
pointHoverRadius: 0,
borderWidth: 3,
data: [370, 394, 415, 409, 425, 445, 460, 450, 478, 484]
}
]
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
fontColor: "#9f9f9f",
beginAtZero: false,
maxTicksLimit: 5,
//padding: 20
},
gridLines: {
drawBorder: false,
zeroLineColor: "#ccc",
color: 'rgba(255,255,255,0.05)'
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(255,255,255,0.1)',
zeroLineColor: "transparent",
display: false,
},
ticks: {
padding: 20,
fontColor: "#9f9f9f"
}
}]
},
}
});