Apexcharts.js: yaxis inverted and bars not showing on mobile

[ordago]

Codepen

https://codepen.io/ordago/pen/pYNNye

Explanation

The codepen has the code how I have it in my project, but I don't see the problem when I opened the codepen on my phone.

• What is the behavior you expect?
  To see it as seen when using Chrome responsive mode:

• What is happening instead?

The bars are not showing and the yaxis is inverted. In desktop works as expected.

• What error message are you getting?

None.

Edit:

Changing the chart height to 550 made the chart bars appear and yaxis to have its normal direction but the chart is squeezed at the top and the legend way down below:

[junedchhipa]

I tested in mobile browsers (Android chrome as well as iPhone chrome) and the chart renders correctly on both the devices with legends taking up normal space.

I suspect the problem is with legend calculation, so if it causing issues for you, try setting the height of each legend item with CSS as the legend is drawn with HTML.

[ordago]

Hi @junedchhipa , thanks for replying

I've got more clues. I used remote debugging with Chrome.

Error: attribute height: A negative value is not valid. ("-164.652")

The console says that and points to

"leading" == e ? this.leading && this.leading(i) : "string" == typeof a ? this.node.setAttributeNS(a, e, i.toString()) : this.node.setAttribute(e, i.toString()),

---

There is a line in the css line-height: 1.5em; for h4 .h4

It now works, this patched it:

<style>
    .apexcharts-legend-series {
        line-height: normal;
    }
</style>

[junedchhipa]

Thanks for the clue! I will apply the same patch and even look for the error

Error: attribute height: A negative value is not valid. ("-164.652")