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

Stacked Area Charts Don't Stack #4132

Closed
krcoats opened this issue Dec 4, 2023 · 3 comments · Fixed by #4327
Closed

Stacked Area Charts Don't Stack #4132

krcoats opened this issue Dec 4, 2023 · 3 comments · Fixed by #4327
Labels
bug Something isn't working high-priority

Comments

@krcoats
Copy link

krcoats commented Dec 4, 2023

Description

Prior to 3.44.1, stacked area charts would stack, even with a combo chart. I have a combo chart that has used stacked bars, stacked areas and a single line for over a year. But as of 3.44.1, the bars stack, but the areas do not stack. Even after removing all other series except for the areas and they still won't stack. Even Apexchart's website's demo for stacked areas doesn't stack now.

Steps to Reproduce

  1. Create a simple stacked area chart
  2. Observe that chart does not stack (areas overlap instead of stacking)
  3. Or review the apexcharts stacked area page (https://apexcharts.com/javascript-chart-demos/area-charts/stacked/) and observe that the areas are not stacked

Expected Behavior

In the codepen/reproduction link, I would expect the values to stack and plot on the Y value at the sum of all values. For example, the last values in 1999 are 125 and 100, which, stacked, should plot at 225.

In the screenshot of the apex charts website, the values are 20, 11, 10, which stacked would plot at 41.

Actual Behavior

"Stacked" areas (in codepen and apex charts website screenshot) are overlapping, not stacking.

Screenshots

This is from the apex charts website to show even the demo is not functioning properly
apex_charts_website_stacked_area_demo

Reproduction Link

https://codepen.io/krcoats/pen/OJdrLKW

Thank you for the help.

@krcoats krcoats added the bug Something isn't working label Dec 4, 2023
@junedchhipa
Copy link
Contributor

The issue is being addressed. Meanwhile, you can fix this by setting

options = {
  chart: {
    stacked: true,
    stackOnlyBar: false
  }
}

@rosco54
Copy link
Contributor

rosco54 commented Feb 24, 2024

If the type is removed from both series they will stack, even though stackOnlyBar is true (by default). This shouldn't happen.

@Tyrannas
Copy link

image
I'm facing the same problem, using vue3-chartjs.
Tried the stackOnlyBar but it's not working either

rosco54 added a commit to rosco54/apexcharts.js that referenced this issue Mar 13, 2024
The default type for chart is "line" and the default for series is the
chart type, therefore, if the types of all series match the chart type,
this should not be considered a combo chart.
rosco54 added a commit to rosco54/apexcharts.js that referenced this issue Mar 18, 2024
The default type for chart is "line" and the default for series is the
chart type, therefore, if the types of all series match the chart type,
this should not be considered a combo chart.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working high-priority
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants