ChartJS padding from lines left and right

Question

The designer designed the charts like this

But whadever option I try I get it like this:

The problem is that the line exceed the beginning and the end of the chart. Rest is ok? How can I fix this?

Answer 1

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

Answer 2

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

Answer 3

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

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