ChartJS Line chart cut off at the top and bottom

Felix Jassler

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)

tyelford

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related