I use ApexCharts to render a simple line chart. Now I would like to remove the padding around this chart. I do want the labels on both axes, but there should not be any more spacing between those lables and the border of the chart.

You can see what I mean here - I don't want the spacing left of "Fehler" on the Y-axis, nor the spacing below "Tage" on the X-axis:

I tried it with this option:

    grid: {
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },  
    },

However, that did not solve this issue for me.
Also enabling sparkline: true in the chart section does not help.

Any other ideas?

I use ApexCharts to render a simple line chart. Now I would like to remove the padding around this chart. I do want the labels on both axes, but there should not be any more spacing between those lables and the border of the chart.

You can see what I mean here - I don't want the spacing left of "Fehler" on the Y-axis, nor the spacing below "Tage" on the X-axis:

I tried it with this option:

    grid: {
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },  
    },

However, that did not solve this issue for me.
Also enabling sparkline: true in the chart section does not help.

Any other ideas?

• javascript
• apexcharts

1 Answer 1

For Y axis you can add negative offsets and get rid of space in left side.

yaxis: {
          tickAmount: 3,
          labels: {
            offsetX: -15,
          },
        },

grid: {
          padding: {
            left: -5,
          },
        },

More ref - https://github./apexcharts/apexcharts.js/issues/178#issuement-617360081