React-chartjs-2: Add padding to chart

[ribeiroguilherme]

Hi guys

I'm trying to add a padding in the chart. I changed the global config like mentioned in #44 in my component file but still not working.

import { Pie, defaults } from 'react-chartjs-2';
import { merge } from 'lodash';

merge(defaults, {
  global: {
    layout: {
      padding: 25,
    },
  },
});

...
<Pie data={ chartData } options={ chartOptions } height={ 300 } />

I printed the object defaults and the property is changed there, but my charts still look the same thing.

Can anyone help me with this, please? I didn't figure out what is going wrong
Thanks

[ezhlobo]

@ribeiroguilherme it looks like you are using the newest version. I have the same problem: #80. As for me I moved back to v1.5.1 and everything works well as a temporary solution.

[jerairrest]

Hey @ribeiroguilherme, Looks like you need to use the pie defaults instead of using the just the imported default from rjs-2 like seen below.

const chartOptions = merge(defaults.pie, {
    global: {
        layout: {
            padding: 2500,
        },
    },
});

[jerairrest]

Wait.. wait... I lied. Apparently I need more coffee :)

[jerairrest]

@ribeiroguilherme I've created a release-2.0.0 branch where you can add chart.js as a seperate dependency. Can you please add chart.js 2.4.x to your project and see if this branch fixes this issue?

[jerairrest]

Just getting back into things here: I was able add padding by simply passing the following in without actually merging the default values.

const options = {
  layout: {
    padding: {
      left: 150,
      right: 150,
      top: 150,
      bottom: 150,
    },
  }
}

Does that work for you?

[ribeiroguilherme]

Hi @jerairrest , It didn't work here. My code:

const chartOptions = {
  legend: {
    position: 'bottom',
    labels: {
      fontSize: 10,
    },
  },
  layout: {
    padding: {
      left: 350,
      right: 350,
      top: 350,
      bottom: 350,
    },
  },
};

...
<Pie data={ chartData } options={ chartOptions } height={ 250 } />

I'll try the release that you created now to see if it works

[ribeiroguilherme]

Now it's working with the new release. 👍