Setting height on chart creates a larger style tag surrounding it

[mika76]

Image

Explanation

• What is the behavior you expect?
  Setting height on the chart (380px in this case) I expect the resulting chart to be exactly that height

• What is happening instead?
  A style tag is created surrounding the chart and a min-height style is set to larger than the height (394px in this case).

[junedchhipa]

There is some additional padding of around 14px to give some breathing space to the chart.
I will try removing it and see how it looks.

[junedchhipa]

A new property chart.parentHeightOffset: 0 is added which will allow to remove the additional height appended.

[mika76]

Thanks that would help a lot. It's hard to design panels around charts if you can't control their size.

Do you really need this at all though? Seems like people can easily add their own wrapper element and css styles if they want (eg: for padding)

[junedchhipa]

Well, I made a mistake in the beginning by not providing inner padding which would give some breathing space by default.

Now, changing that seems difficult. So, I provided this new option to remove the extra height.

[mika76]

😊 I understand, I mean you might not need the style tag at all since anybody can just wrap the chart into their own div tag and place a margin

[mrabaev48]

Hello.
I still having this issue on initial load.
I'm using Vue js 2, ts, quasar framework.

Solution with chart.parentHeightOffset: 0 doesn't help me.

Any suggestions?

[mika76]

Hey @mrabaev48 what exactly is your issue? The picture does not explain it...

[gabrielbertaglia]

Hi everyone, I'm having some trouble with resizing in ApexCharts using ReactJS. When I reload my page, sometimes the chart renders correctly and sometimes it doesn't. Does anyone have a solution for this?

Correct chart

Incorrect chart