[Chartjs]-ChartJS Line chart cut off at the top and bottom

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

Leave a comment