stepsize x-axe with time string labels - chart.js

Question

this is my code part, which I am using at the moment for chart.js
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: 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'
}]
};
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
}
}],
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
}
}
],
}
}
});
};
I have time string labels with 5 minutes between each other on my x-axe
I added this parameter to my "xAxes Part"
xAxes: [{
ticks: {
minRotation: 0,
maxRotation: 90
},
type: 'time',
time: {
unit: 'hour'
}
}]
Now my chart doesn't work anymore. Only a white page.
I think the problem is, that my x-axe only shows string time labels, but as a string, not as a time value. Can this be the problem?
If yes, how can I solve this?
Is there an exmaple for that?
Thanks a lot !! :)
** UPDATE **
there is one little thing before I can say: "It is perfect ! :)
1. How can I format the tooltip information? It should be: 28.04.2020 - 05:00

Answer 1

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>

Answer 2

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