As you can see below with the canvas element highlighted, there is considerable whitespace below the x axis label. If I resize the canvas, the whitespace stays proportional to the height of it. Are there any settings that control this whitespace? I've ruled out padding and do not see any settings for margins.

Thanks!

Here is the JavaScript that renders the chart:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  options: {
    legend: {
      display: false
    },
    elements: {
      point: {
        radius: 0
      }
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
          drawBorder: true
        },
        ticks: {
          autoSkip: true,
          maxTicksLimit: 1
        }
      }],
      yAxes: [{
        gridLines: {
          display: true,
          drawBorder: false
        },
        ticks: {
          callback: function(value, index, values) {
            return '$' + addCommas(value);
          }
        }
      }]
    },
    layout: {
      padding: 5
    }
  },
  type: 'line',
  data: {
    labels: labels,
    datasets: [
      { 
        data: values,
        fill: false,
        borderColor: "blue"
      }
    ]
  }
});

And the plete jsfiddle: /

As you can see below with the canvas element highlighted, there is considerable whitespace below the x axis label. If I resize the canvas, the whitespace stays proportional to the height of it. Are there any settings that control this whitespace? I've ruled out padding and do not see any settings for margins.

Thanks!

Here is the JavaScript that renders the chart:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  options: {
    legend: {
      display: false
    },
    elements: {
      point: {
        radius: 0
      }
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
          drawBorder: true
        },
        ticks: {
          autoSkip: true,
          maxTicksLimit: 1
        }
      }],
      yAxes: [{
        gridLines: {
          display: true,
          drawBorder: false
        },
        ticks: {
          callback: function(value, index, values) {
            return '$' + addCommas(value);
          }
        }
      }]
    },
    layout: {
      padding: 5
    }
  },
  type: 'line',
  data: {
    labels: labels,
    datasets: [
      { 
        data: values,
        fill: false,
        borderColor: "blue"
      }
    ]
  }
});

And the plete jsfiddle: https://jsfiddle/rsn288fh/2/

• javascript
• chart.js

• 1 Please add code of your chart to the question, and tell us what you have tried so far. My first thought is that it could be space reserved for legend items. – user4051844 Commented Nov 28, 2017 at 11:46
• A JSFiddle reproducing the problem would be extremely helpful as well. – Tot Zam Commented Nov 29, 2017 at 0:49
• Oops, posted early AM and should have known better. So far I've only tried adjusting the padding as outlined in chartjs/docs/latest/configuration/layout.html?h=padding. I've added the code as well as a fiddle. Thanks! – cdlm Commented Nov 29, 2017 at 0:58

2 Answers 2

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.

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/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,
        },
      },
    ],
  },
};