Apexcharts.js: Make Chart Margins and Padding Optional/Adjustable

[benhaynes]

Is your feature request related to a problem? Please describe.

We have removed the left axis labels, but can't left-align the chart because the entire element has been translated:

<g class="apexcharts-inner apexcharts-graphical" transform="translate(20, 30)">

• Red Line: This is the left SVG bound, where we would like to align the chart.
• Green Line: This is where the chart begins because of the translate. Margin should be optional
• Blue Line: This is where the series data starts, this data should also be optional
• Orange Lines: The same data padding on the right side should be optional

Describe the solution you'd like

Give options to remove/adjust these margins/padding (currently the only way is to use Sparklines, but this limits other options)

Describe alternatives you've considered

Forking repo; manual/external CSS overrides; masking with external elements; etc

Additional context

n/a

[junedchhipa]

@benhaynes Good point. I agree that these offset values need to be in the config to allow easier changes in the layout. Otherwise, it becomes a pain to fit in the design.

I will work on it.

PS. I like the way you reported the issue with extra details. Helps a lot ;)

[benhaynes]

Awesome, thank you!

No problem — we manage OSS too, so I know how useful a well-written issue is. ;)

[junedchhipa]

Ah! Just checked out one of your repository - directus, and I'm really impressed. Keep up the great work.

[benhaynes]

Thanks, and likewise! APEXCHARTS has been a pleasure to work with so far!

[junedchhipa]

@benhaynes
The way to remove all paddings/margins would be

1. hide the y-axis by yaxis.show = false
2. Remove the default grid paddings

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

This should remove all unnecessary spacings.
Let me know if the above settings worked.

This update is available in v2.2.0

[benhaynes]

Excellent! This seems to be working on our side. Thank you so much for the quick turn-around!

Keep up the great work!

[navotera]

Here the result :
I think there are white space (not very good look)

Is there any config to achive like this :

Great Library, Thank

[junedchhipa]

@navotera
Please post a codepen of your example.

[yairEO]

@junedchhipa - I found a "bug", or at least an inconsistency, regarding your tip to remove padding.

It does not work for a bar chart which has horizontal: true in the plotOptions:

Demo:
https://codepen.io/vsync/pen/XvMPGq

---

I write this because of another bug found for that configuration which I have opened but nobody addressed it... https://github.com/apexcharts/apexcharts.js/issues/815

:(

[Niall-Kenny]

Hi there,

just wondering how to remove the whitespace on the left of the graph in react.

[inoda]

Is there a way to keep the y-axis labels but still remove the extra padding on the left? It's unideal that the only way to get rid of it is by removing helpful labeling.

[michaeljakob]

I have the exact same bug. How to remove all the margin there?

[michaeljakob]

We fixed it by adding the following CSS to <apexchart /> in VueJS.

`

the_chart {

left: -10px;
position: relative;
}
`

[junedchhipa]

One more way to adjust the left spacing of the y-axis

yaxis: {
  labels: {
    offsetX: -10
  }
},
grid: {
  padding: {
    left: -5
  }
}

[internationalhouseofdonald]

This worked well for me when trying to get a chart to fit inside of a 300px block-level element.

  yaxis: {
    labels: {
      offsetX: -25,
      rotate: -90,
    },
  },
  grid: {
    padding: {
      left: -25,
    },
  },

[stonehubvn]

Check it: https://github.com/apexcharts/vue-apexcharts/issues/44#issuecomment-456072048
A full example of your updated jsfiddle

[pacocom]

I have same problems @Niall-Kenny https://github.com/apexcharts/apexcharts.js/issues/178#issuecomment-539956398.
Imposible to remove this margin!
This library has a lot of bug.

[junedchhipa]

@pacocom I have posted a possible solution for the left margin in this comment

[pacocom]

@junedchhipa Thank!

Now, In my case I try

grid: {
  padding: {
    left: -16
  }
}

and it works, but I don't know why in another case is letf: -5.

Thanks!