0👍
The problem is that your labels are not in RFC2822 or ISO format and cannot be parsed to a Date object. You need to define the format to be used for parsing your time strings. Chart.js internally uses Moment.js to parse the dates. Therefore you should refer to Moment.js documentation to find out about valid formats.
xAxes: [{
...
type: 'time',
time: {
parser: 'HH:mm',
unit: 'hour'
}
Make sure also to use the bundled version of Chart.js that includes Moment.js in a single file.
Please have a look at your amended code below.
var lineChartData = {
labels: ['08:00', '08:05', '08:10', '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55', '09:00'],
datasets: [{
label: 'Temperatur (°C)',
borderColor: 'red',
backgroundColor: 'red',
fill: false,
data: [23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23],
yAxisID: 'y-axis-1',
cubicInterpolationMode: 'monotone'
}, {
label: 'Feuchtigkeit (%)',
borderColor: 'blue',
backgroundColor: 'blue',
fill: false,
data: [34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34],
yAxisID: 'y-axis-2',
cubicInterpolationMode: 'monotone'
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
scales: {
xAxes: [{
ticks: {
minRotation: 0,
maxRotation: 90
},
type: 'time',
time: {
parser: 'HH:mm',
unit: 'hour',
displayFormats: {
hour: 'HH:mm'
}
}
}],
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
ticks: {
max: 60,
min: 0,
stepSize: 10
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
ticks: {
max: 60,
min: 0,
stepSize: 10
}
}
],
}
}
});
};<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="100"></canvas>0👍
You didn’t provide the chartColors object, so assuming those colors and added them by default. Also, I am expecting that you have installed moment.js library before chart.js library for Time type charts to work.
Other than that, the labels you’re providing are not in the standard Date format, (e.g. 2020-05-29T08:02:00Z) and you need to pass time.parser option to define that you’re specifying only hours of the date. Read more about parser
window.chartColors = {
'red': '#ff0000',
'blue': '#0000ff'
}
var lineChartData = {
labels: ['08:00:00', '08:05:00', '08:10:00', '08:15:00', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55', '09:00'],
datasets: [{
label: 'Temperatur (°C)',
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
fill: false,
data: [23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23],
yAxisID: 'y-axis-1',
cubicInterpolationMode: 'monotone'
}, {
label: 'Feuchtigkeit (%)',
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
fill: false,
data: [34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34],
yAxisID: 'y-axis-2',
cubicInterpolationMode: 'monotone'
}]
};
function init() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
scales: {
xAxes: [{
ticks: {
minRotation: 0,
maxRotation: 90
},
type: 'time',
time: {
unit: 'hour',
parser: 'hh'
}
}],
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
ticks: {
max: 60,
min: 0,
stepSize: 10
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
ticks: {
max: 60,
min: 0,
stepSize: 10
}
}
],
}
}
});
};
window.onload = init();
Working demo, JSFiddle