Apexcharts.js: Display issues on Apple Devices

[Giles-W]

Codepen

https://codepen.io/Giles-W/pen/jjmmNg

Explanation

When rendering charts on Apple Devices one of my sets of charts do not render.

So far I have tested this on MacOS (Hackintosh) using Safari and iOS (iPhone 7 and XR) using both Safari and Chrome.

What I experience is that the hourly charts do not render and only the daily charts render.

I have tried Dev Tools on MacOS to see if any errors are being returned to the console, but I'm not getting anything.

ADDITIONAL comments:
1) I would very much like the "subCharts" used to navigate the main charts to be rendered without the Y-Axis and Y-Axis title, but I find that with the charts linked they are rendered using the options for the sub chart.
2) When the chart width for the Hourly chart is allowed to have a width less than 310px the chart does not render the data points according to the y-Axis scale. All values are rendered below the 15 tick. This only seems to happy on the Hourly Chart and is not limited to Apple devices either. I have seen this on Chrome and Firefox for PC as well as Chrome for Android.

[junedchhipa]

You're right.
The first chart didn't render on Safari. I will dig more to see what caused it, thanks for reporting.

[Giles-W]

You're right.
The first chart didn't render on Safari. I will dig more to see what caused it, thanks for reporting.

Thanks for the super fast confirmation. Glad it's not just me... Could still be a PEBKAC, but will wait for your feedback.

Much appreciated and REALLY REALLY love Apex Charts. They are brilliant to work with.

[junedchhipa]

Hi,

The issue was with Date format which you used in series.
Safari doesn't accept the "2019-06-09 00:00" date format, hence you need to change those values.

If you want to check which datetime format is accepted by Safari,
you can try Date.parse("2019-06-09 00:00") and see it returns NaN.

A valid datetime string would be 12/12/2019 00:18 to be accepted by Safari.

[Giles-W]

After updating the format to use "YYYY/MM/DD HH:mm" i.e. simply replacing the "-" with "/" the chart is now displaying on Safari.

Thank you for figuring that out for me. much appreciated.

[JamieMcDonnell]

Using a dropShadow on line charts, or a filter of any kind on a donut chart also prevents it from rendering.

On a line chart it seems to be enough to emit the 'dropShadow' property from the options object.

On the donut chat I had to add the following styles to my component in order to override the filter prop that gets added to chart segments and labels:

<style lang="scss">
svg{
  path.apexcharts-pie-area,
  text.apexcharts-pie-label{
    filter: none;
  }
}
</style>

Hope that helps someone

[hassamsaeed-qbatch]

After updating the format to use "YYYY/MM/DD HH:mm" i.e. simply replacing the "-" with "/" the chart is now displaying on Safari.

Thank you for figuring that out for me. much appreciated.

@Giles-W Thank you, Man. It is Working