2👍
I think you’ve pretty much got it as is, just one configuration issue in the options
object.
You currently have these options:
options: {
title: {
display: true,
text: 'Wetterdaten'
},
yAxes: [{
ticks: {
stepSize: 10
}
}]
}
but what is missing, is that the yAxes
array property has to be inside of a scales
object. Like this:
options: {
title: {
display: true,
text: 'Wetterdaten'
},
scales: {
yAxes: [{
ticks: {
stepSize: 10
}
}]
}
}
With this config in options
your stepSize property will kick in and the top of the graph will be 20 when showing just the temperature data.
BUT
Now that the stepSize for the entire yAxis is 10
, the pressure dataset goes way out of wack. So for this problem, you could implement two yAxes, where the pressure data is on the right yAxes and everything else is on the left yAxes:
var weatherCanvas = document.getElementById('weatherChart').getContext('2d');
var weatherChart = new Chart(weatherCanvas, {
type: 'line',
title: 'Wetter',
data: {
labels: ["01-01", "02-01", "03-01", "04-01", "05-01", "06-01", "07-01", "08-01", "09-01"],
datasets: [{
label: 'Temperature[°C]',
data: [14, 18, 18, 16, 14, 11, 11, 11, null],
borderColor: "rgb(252, 74, 74)",
yAxisID: 'left-y-axis'
}, {
label: 'Windspeed[km/h]',
data: [14, 18, 18, 16, 14, 11, 11, 11, null],
borderColor: "rgb(101, 219, 255)",
hidden: true,
yAxisID: 'left-y-axis'
}, {
label: 'Humidity[%]',
data: [84, 88, 88, 86, 74, 71, 71, 71, null],
borderColor: "rgb(101, 155, 255)",
hidden: true,
yAxisID: 'left-y-axis'
}, {
label: 'Pressure[hPa]',
data: [1193, 1211, 1211, 1200, 1999, 1997, 1995, 1993, null],
borderColor: "rgb(211, 211, 211)",
hidden: true,
yAxisID: 'right-y-axis'
}]
},
options: {
title: {
display: true,
text: 'Wetterdaten'
},
scales: {
yAxes: [{
id: 'left-y-axis',
position: 'left',
ticks: {
stepSize: 10
}
}, {
id: 'right-y-axis',
position: 'right',
ticks: {
stepSize: 100
}
}]
}
}
});
Here is a reference to Axes Configuration with a few examples as well.
I hope this helps.
2👍
A very recent fix is shown here.
You’d have to manually edit your Chart.js file src/controllers/controller.line.js
(For Angular 2, this file path will be located inside directory node_modules/chart.js/
.)
Or just wait for the next Chart.js release which will most likely contain the fix.
An alternative workaround is described in comment 1 of this bug ticket: https://github.com/chartjs/Chart.js/issues/4202
Note that I posted the same comment to an identical question (though not for AngularJS):
https://stackoverflow.com/a/47306019/3061684