I'm using ChartJS to display some weather data. The problem I have is that the lines going right to the edge at the top and bottom look like they've been cut off.
I threw some example data together and uploaded it to this codepen: https://codepen.io/anon/pen/zELEWd
Is there some way to just add more space above the highest and the lowest point?
I read from this thread that there's the padding option, but that one affects the whole canvas and not the chart itself.
There are also some tips from this stockoverflow question, but I can't really put a suggestedMin
and suggestedMax
value in there, since I have more than one dataset in there that all have slightly different min and max values. (eg. for Pressure[hPa] I don't want to set suggestedMin
to 0, since its values are all somewhere around 1200)
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.
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments