I build an example line chart with chart.js. Here is my html and js code. I see chart with my data set is drawn.
But when I try to enable time scale in my x axis by adding this in options,
const config = {
type: 'line',
data: data,
options: {
responsive: true,
scales: {
x: {
type: 'time',
}
}
}
};
no chart is being drawn. And I don't see any error in browser console. Can you please tell me what am I missing?
Working html and js without time axis enable.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Integration</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<canvas id="line-chart" width="800" height="450"></canvas>
<script>
const data = {
datasets: [{
label: 'my first dataset',
borderColor: 'rgb(255, 99, 132)',
data: [{ x: "2016-12-25", y: 3 }, { x: "2016-12-28", y: 10 }, { x: "2016-12-29", y: 5 }, { x: "2016-12-30", y: 2 }, { x: "2017-1-3", y: 20 }, { x: "2017-1-5", y: 30 }, { x: "2017-1-8", y: 45 }],
}
,
{
label: 'My Second dataset',
borderColor: 'rgb(99, 255, 132)',
data: [{ x: "2016-12-25", y: 20 }, { x: "2016-12-27", y: 62 }, { x: "2016-12-26", y: 15 }, { x: "2016-12-31", y: 172 }, { x: "2017-1-1", y: 30 }, { x: "2017-1-5", y: 50 }, { x: "2017-1-6", y: 25 }],
}
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
}
};
const myChart = new Chart(
document.getElementById('line-chart'),
config
);
</script>
But
Reason your time axis is not working is because since chart.js V3 you will need to include your own date adapter, chart.js does not ship with a default date adapter anymore. For more information see the documentation
const data = {
datasets: [{
label: 'my first dataset',
borderColor: 'rgb(255, 99, 132)',
data: [{
x: "2016-12-25",
y: 3
}, {
x: "2016-12-28",
y: 10
}, {
x: "2016-12-29",
y: 5
}, {
x: "2016-12-30",
y: 2
}, {
x: "2017-01-03",
y: 20
}, {
x: "2017-01-05",
y: 30
}, {
x: "2017-01-08",
y: 45
}],
},
{
label: 'My Second dataset',
borderColor: 'rgb(99, 255, 132)',
data: [{
x: "2016-12-25",
y: 20
}, {
x: "2016-12-27",
y: 62
}, {
x: "2016-12-26",
y: 15
}, {
x: "2016-12-31",
y: 172
}, {
x: "2017-01-01",
y: 30
}, {
x: "2017-01-05",
y: 50
}, {
x: "2017-01-06",
y: 25
}],
}
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
scales: {
x: {
type: 'time',
}
}
},
};
const myChart = new Chart(
document.getElementById('line-chart'),
config
);<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Integration</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!--Line below added, added date adapter for time scale -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
<canvas id="line-chart" width="800" height="450"></canvas>
</body>
</html>