Apex Chart remove margin/padding

[james_electriceng]

Hi Guys,

I was hoping someone knew how to remove the margin or whatever it is on apex chart?

I have a bar chart and I would like to use the entire space available on a flex container. Currently, the is black space all around it.

I am only using one bar. I'm using it like a progress bar. The apex chart provides the ability to add annotations that the embedded progress bar lacks. As can be seen in the image, we are currently adding "LA1" and "LA2". there is a good chance we might add a couple more things.

I have attached the view if anyone wants to look at it.
Bar Chart Apex Chart.zip (3.6 KB)

[djs]

You are showing your y axis on the side, you'll want to hide it:

Also, you can specify the column width, with this prop:

Not sure where the top/bottom space is coming from; (and this way is a little hacky...) but I managed to get rid of it with this:

[james_electriceng]

You are a legend Daniel,

I have the labels.show = false. But it still had a gap on the left side. So, i followed your patten and changed grid.padding.left = -10.

Thanks heaps.

[richardNZ15]

I have found on another thread that setting the root container that houses this component to overflow = hidden works nicely. It defaults to Auto, and there seems to be some annoying in-built padding.
A bit nicer approach than negative padding