[Chartjs]-Increase Chart.js Scale Padding/Margin

19👍

Once you update to a latest version of Chart.js (currently v2.6.0), in the bar config section, you can set a maxBarThickness. Doing this will allow you to increase the chart canvas width, without needing to worry about the bar getting larger.

Your options section would look as following:

var option = {
    scales: {
        xAxes: [{
            maxBarThickness: 100
        }]
    }
};

JSFiddle: https://jsfiddle.net/dhhnssgc/

See the below documentation for more information about the bar chart configuration options:
http://www.chartjs.org/docs/latest/charts/bar.html#configuration-options

Depending on how you set up the rest of your chart, the barPercentage and barThickness options may also work for you.


If you want to move your entire chart away from the edge of the canvas, you can use the layout padding option: http://www.chartjs.org/docs/latest/configuration/layout.html

options: {
    layout: {
        padding: {
            left: 0,
            right: 50,
            top: 0,
            bottom: 0
        }
    }
}

JSFiddle: https://jsfiddle.net/dhhnssgc/2/

0👍

If someone needs margin from the Y-axe to the chart with time on the X-axe just put the min of X some days earlier. Example:

...
scales: {
  xAxes: [{
    type: 'time',
    time: {
      min: moment(new Date()).add(-5, 'days'),
      unit: 'month'
    }
  }]
}
...

Leave a comment