[Chartjs]-How can I remove extra whitespace from the bottom of a line chart in chart.js?

by

11👍

✅

I know you said you ruled out padding, but this is the only option I can see working:

options: {
    layout: {
        padding: {
            bottom: -20
        }
    }
}

Obviously you can play with the -20 to what works for you.

Here is the reference for padding for chartjs, if you wanted to see more

EDIT:

I’ve updated your jsfiddle, with a colored div below the chart. As you resize it seems to stay at the same spot below the chart.

4👍

Changing the tickMarkLength to 0 results in no padding on the left or bottom of the chart (or wherever your axis happens to be).

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

tickMarkLength

Length in pixels that the grid lines will draw into the axis area.

const options = {
  scales: {
    xAxes: [
      {
        ticks: {
          display: false,
        },
        gridLines: {
          display: false,
          tickMarkLength: 0,
        },
      },
    ],
    yAxes: [
      {
        ticks: {
          display: false,
        },
        gridLines: {
          display: false,
          tickMarkLength: 0,
        },
      },
    ],
  },
};

Leave a comment