Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple-yaxis-scales , 3 series with 2 scales demo broken in 3.47.0 (JS) #4323

Closed
Labels
bug Something isn't working

Comments

@LeoMcH36
Copy link

Description

Any multi axis chart that has multiple yaxis with the same seriesName cause it to crash instead of showing like the 2nd demo at https://apexcharts.com/docs/chart-types/multiple-yaxis-scales/, even this demo doesnt work using 3.47.0, works fine in 3.46.0

Steps to Reproduce

  1. Create a multi axis chart, e.g the second example at https://apexcharts.com/docs/chart-types/multiple-yaxis-scales/
  2. use apexchart@3.47.0
  3. have multiple elements in yaxis option with the same seriesName e.g "Column A" appears twice in the demo

Expected Behavior

Chart with multiple series sharing singular y-axis on left hand side displays like the demo

Actual Behavior

chart does not display, bar the labels at the bottom, crashes with error " Cannot read properties of undefined (reading 'result')"

Screenshots

error
image
using apexcharts@3.46.0
image
using apexcharts@3.47.0
image

Reproduction Link

https://codepen.io/rogueDovah/pen/eYozBLE

@LeoMcH36 LeoMcH36 added the bug Something isn't working label Mar 12, 2024
@LeoMcH36 LeoMcH36 changed the title Multiple-yaxis-scales , 3 series with 2 scales demo broken in 3.47.0 Multiple-yaxis-scales , 3 series with 2 scales demo broken in 3.47.0 (JS) Mar 12, 2024
@aboscolo77
Copy link

aboscolo77 commented Mar 13, 2024

Same here.

In the meantime I solved this by blocking to the previous version

<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.46"></script>

@rosco54
Copy link
Contributor

rosco54 commented Mar 14, 2024

Compatibility with existing charts needs to be fixed and I will look at this.

The solution is to use seriesName with an array (as of 3.47.0). Eg, to fix the demo, replace the existing yaxis array (three axes) with the following (two axes):

yaxis: [
{
seriesName: ['Column A', 'Column B'],
axisTicks: {
show: true
},
axisBorder: {
show: true,
},
title: {
text: "Columns"
}
}, {
opposite: true,
seriesName: 'Line C',
axisTicks: {
show: true
},
axisBorder: {
show: true,
},
title: {
text: "Line"
}
}
],

With this, 3.47.0 will work, and you will also see that collapsing Column A no longer causes it's Y axis to hide prematurely while Column B is still visible.

The documentation and the demo needs to be updated.

Briefly: if you want two axes just define two axes, not three with one not shown. Then use seriesName: [] to reference all the series' that will reference each axis. You can still use seriesName with a string to reference one series, and/or let ApexCharts distribute [remaining unreferenced] series. As a default, if you don't use seriesName for any yaxis, it will distribute each series to each yaxis one for one, with any left over series referenced to the last yaxis.

rosco54 added a commit to rosco54/apexcharts.js that referenced this issue Mar 14, 2024
Multiple-yaxis-scales, 3 series with 2 scales demo was broken
by 3.47.0 after the introduction of the new yaxis:seriesName as an
array feature. Refactored some of that code.

Miscellaneous:
Remove yaxis.min: 0 from the bar axes in sample as not required.
@LeoMcH36
Copy link
Author

Thanks, This approach also seems to have fixed the huge performance drop when toggling legends on this type of chart

rosco54 added a commit to rosco54/apexcharts.js that referenced this issue Mar 16, 2024
Multiple-yaxis-scales, 3 series with 2 scales demo was broken
by 3.47.0 after the introduction of the new yaxis:seriesName as an
array feature. Refactored some of that code.

Fixes relating to yaxis.seriesName array feature added to 3.47.0.
Anything that indexes into minYArr[], maxYArr[], baseLineY[],
xyRatios.yRatio[] that doesn't derive from realIndex needed to go
through w.globals.seriesYAxisMap.
Primarily affected y-axis annotations and possibly some other
positioned features in multi-axis charts.

Miscellaneous:
Remove yaxis.min: 0 from the bar axes in sample as not required.
rosco54 added a commit to rosco54/apexcharts.js that referenced this issue Mar 18, 2024
…charts#4323

Multiple-yaxis-scales, 3 series with 2 scales demo was broken
by 3.47.0 after the introduction of the new yaxis:seriesName as an
array feature. Refactored some of that code.

Fixes relating to yaxis.seriesName array feature added to 3.47.0.
Anything that indexes into minYArr[], maxYArr[], baseLineY[],
xyRatios.yRatio[], etc, that doesn't derive from realIndex needed to
map the index through w.globals.seriesYAxisMap[seriesIndex].
Primarily affected y-axis annotations and possibly some other
positioned features in multi-axis charts.

Fix historical issue with yaxis annotations being drawn when the axis
is hidden or rescaled such that the annotation is no longer within the
range, or where yaxis rect area annotation was clipped (either y or y2
was off scale). apexcharts#3073

Miscellaneous:
1) Remove yaxis.min: 0 from the bar axes in sample as not required.
2) Fix several calls to CoreUtils.getLogVal(b,d,seriesIndex) that
were missing the 'b' (base) argument.
rosco54 added a commit to rosco54/apexcharts.js that referenced this issue Mar 18, 2024
…charts#4323

Multiple-yaxis-scales, 3 series with 2 scales demo was broken
by 3.47.0 after the introduction of the new yaxis:seriesName as an
array feature. Refactored some of that code.

Fixes relating to yaxis.seriesName array feature added to 3.47.0.
Anything that indexes into minYArr[], maxYArr[], baseLineY[],
xyRatios.yRatio[], etc, that doesn't derive from realIndex needed to
map the index through w.globals.seriesYAxisMap[seriesIndex].
Primarily affected y-axis annotations and possibly some other
positioned features in multi-axis charts.

Fix historical issue with yaxis annotations being drawn when the axis
is hidden or rescaled such that the annotation is no longer within the
range, or where yaxis rect area annotation was clipped (either y or y2
was off scale). apexcharts#3073

Miscellaneous:
1) Remove yaxis.min: 0 from the bar axes in sample as not required.
2) Fix several calls to CoreUtils.getLogVal(b,d,seriesIndex) that
were missing the 'b' (base) argument.
3) in getYLogValue(): return  zero if 'd' <= 0 (was 'd' == 0). This may
fix apexcharts#4241.
rosco54 added a commit to rosco54/apexcharts.js that referenced this issue Mar 19, 2024
…charts#4323

Multiple-yaxis-scales, 3 series with 2 scales demo was broken
by 3.47.0 after the introduction of the new yaxis:seriesName as an
array feature. Refactored some of that code.

Fixes relating to yaxis.seriesName array feature added to 3.47.0.
Anything that indexes into minYArr[], maxYArr[], baseLineY[],
xyRatios.yRatio[], etc, that doesn't derive from realIndex needed to
map the index through w.globals.seriesYAxisMap[seriesIndex].
Primarily affected y-axis annotations and possibly some other
positioned features in multi-axis charts.

Fix historical issue with goals and annotations being drawn when the
axis is hidden or drawn outside the grid area when zoomed or panned,
or where rect area annotation should be clipped. apexcharts#3073 apexcharts#3553 apexcharts#2757

Miscellaneous:
1) Remove yaxis.min: 0 from the bar axes in sample as not required.
2) Fix several calls to CoreUtils.getLogVal(b,d,seriesIndex) that
were missing the 'b' (base) argument.
3) in getYLogValue(): return  zero if 'd' <= 0 (was 'd' == 0). This may
fix apexcharts#4241.
4) wrong point annotation x position in sparkline chart fix apexcharts#4081.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment