chart.js cuts off canvas - but padding makes doughnut very small

Question

I have created a doughnut chart.js.

Without padding the canvas is cut off like

first i tried adding this code

   options: {
  cutoutPercentage: 85,

  layout: {
    padding: {
      bottom: 20
    }
  },

It works for the padding, but the canvas then becomes really small like

The doughnut was already pretty small in smartphone view, but this is to small...

source code on github

Anyone has an alternative solution to this issue?

user_3688864 · Answer

I found that the plugins part of your code was causing most of the problem.

I experimented with the additional height being set in the plugins so that your plugins and options look like this:

options: {
  cutoutPercentage: 85,
  layout: {
    padding: {
      bottom: 5
    }
  },
  legend: {
    labels: {
      fontColor: '#384241',
      boxWidth: 7,
      fontFamily: "'arla-thin'"
    }
  }
},
plugins: [{
  beforeInit: function (chart, options) {
    chart.legend.afterFit = function () {
      this.height = this.height + 5;
    }
  }
}]

I also changed the #usersChart css to margin-bottom: 20px; to reduce the gap.

Here's what it looks like on a Galaxy S5.

chart.js cuts off canvas - but padding makes doughnut very small

1 Answers