[Chartjs]-ChartJS padding from lines left and right

by

3👍

✅

Thanks for both the suggestions but that didn’t do the trick. After a lot of trial and error I found the solution:

  plugins: [{
    afterUpdate: function(chart) {
        var dataset = chart.config.data.datasets[0];
        var offset = 12;

        // Blue offset left and right
        var dataset = chart.config.data.datasets[1];
        for (var i = 0; i < 6; i++) {
            var model = dataset._meta[0].data[i]._model;
            if ((i + 1) == 6){
              model.x -= offset;
            } else {
              model.x += offset;
            }
            model.controlPointNextX += offset;
            model.controlPointPreviousX += offset;
        }            
    }
  }],

I have put it right under the data: {}, and before options: {}.

Hope I help someone with this answer!
Cheers,
Chris

1👍

You can fix this by adding a bit of padding to the left and right side of your chart in the options object like so:

options: {
    layout: {
      padding: {
        right: 100,
        left: 100
      }
    },
}

You will need to change the numbers so it is a small change but big enough that your chart shows correctly

1👍


options:{
   scales:{
      xAxes:[{
           offset: true
          }]
    }
}

The chart you shared seems to have an offset as well as xvalues with corresponding null values

Leave a comment