CODEWITHSUNDEEP
javascriptchart.js
Chris Kroon
Chris Kroon

Reputation: 51

ChartJS padding from lines left and right

The designer designed the charts like this

Desired chart

But whadever option I try I get it like this:

Current chart

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

Upvotes: 1

Views: 2179

Answers (3)

Chris Kroon
Chris Kroon

Reputation: 51

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

Upvotes: 3

Jared Gibb
Jared Gibb

Reputation: 47


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

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

Upvotes: 1

LeeLenalee
LeeLenalee

Reputation: 31351

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

Upvotes: 1

Related Questions