apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.03k stars 1.28k forks source link

Multiple Y-Axis sample is not rendering properly #4492

Open adnane-ka opened 1 month ago

adnane-ka commented 1 month ago

Description

I encountered an issue with the ApexCharts library where some of the examples on the official documentation are not rendering correctly. Specifically, the example for the mixed chart with multiple Y-axes fails to render and produces an error. This issue is present on the official ApexCharts documentation sample page.

Steps to Reproduce

  1. Navigate to the following URL: https://apexcharts.com/javascript-chart-demos/mixed-charts/multiple-yaxis/
  2. Observe the chart failing to render on the page.
  3. Open the browser console to see the error message.

Expected Behavior

The chart should render correctly without any errors, displaying the mixed chart with multiple Y-axes as shown in the example on the documentation page.

Actual Behavior

The chart does not render and the following error appears in the browser console:

Cannot read properties of undefined (reading 'group')
TypeError: Cannot read properties of undefined (reading 'group')

Reproduction Link

Here is a minimal reproduction of the issue using the provided Codepen template: https://codepen.io/Danny_28/pen/VwOPLgN

rosco54 commented 1 month ago

Even though there are no data series to plot, therefore nothing to match yaxis.seriesName and no series groups (in the case where series have no group names defined default group names would be generated), which means group (that is, this.config.series.group) is undefined, this condition needs to be handled more gracefully. It should not get this far in the code.

But, the issue here is that there are no series defined in the examples.