Remove empty space around chart

1

I have made a chart and currently have white space to the top and bottom of the chart.
I wish to reduce this as much as possible. Is there an option within quickcharts that can do this other than the initial height and width parameter that goes in at the start?

2

Hi @DBarlow,

The way to do this is by using options.layout.padding. “Padding” is the amount of space that is added around the chart.

Chart.js has some built-in padding for visual reasons, but you can set a negative padding to really clip things close. For example:

{
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
      label: 'Users',
      data: [50, 60, 70, 180]
    }]
  },
  options: {
    layout: {
      padding: -5
    }
  }
}

chart.js negative padding
chart.js negative padding1000×600 48.1 KB

Note that you can also control the padding on each side. For example:

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

Hope this helps!

3

I recall finding that information at one point and trying it but it did not seem to work for me.
I have just tried again and found that the padding is working but not in the way that i was expecting.
I’ve provided the sandbox for the chart so that you can see.
When i change the padding for example to be -400 on left and right, it moves it but then centers it again. But if you open the URL for the image, you can still see there is a large grey area on the left and right which i wish to remove
Sandbox

4

Ah, it sounds like you just want to reduce the width of the image, so that the chart fills most of the image.

You can do this by setting the width parameter in the chart URL. Here’s an example in the sandbox (set to 300x300, the pie nearly fills the whole image): link

Direct link to image