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

100% stacked column chart doesn't work #131

Closed
firestormdong opened this issue Feb 24, 2022 · 2 comments · Fixed by #142
Closed

100% stacked column chart doesn't work #131

firestormdong opened this issue Feb 24, 2022 · 2 comments · Fixed by #142
Labels
bug Something isn't working

Comments

@firestormdong
Copy link

Describe the bug
I followed https://apexcharts.com/javascript-chart-demos/column-charts/stacked-column-100/ but got a normal stacked chart not 100% stacked.

Code example to Reproduce

ApexCharts apexCharts = ApexChartsBuilder.get()
                .withSeries(
                        new Series<>("PRODUCT A", 44, 55, 41, 67, 22, 43, 21, 49),
                        new Series<>("PRODUCT B", 13, 23, 20, 8, 13, 27, 33, 12),
                        new Series<>("PRODUCT C", 11, 17, 15, 15, 21, 14, 15, 13))
                .withChart(ChartBuilder.get()
                        .withType(Type.bar)
                        .withHeight("350")
                        .withStacked(true)
                        .withStackType(StackType.full)
                        .build())
                .withXaxis(XAxisBuilder.get()
                        .withCategories("2011 Q1", "2011 Q2", "2011 Q3", "2011 Q4", "2012 Q1", "2012 Q2", "2012 Q3", "2012 Q4")
                        .build())
                .withFill(FillBuilder.get()
                        .withOpacity(1.0)
                        .build())
                .withLegend(LegendBuilder.get()
                        .withPosition(Position.right)
                        .withOffsetX(0.0)
                        .withOffsetY(50.0)
                        .build())
                .build();

Expected behavior
A 100% stacked chart is created.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
  • Version: 98
@firestormdong firestormdong added the bug Something isn't working label Feb 24, 2022
@firestormdong
Copy link
Author

I think I found the cause.
The option chart.stackType is encoded as full, not 100%.

@firestormdong
Copy link
Author

Found a workaround: Manually overriding chart.stackType after the chart is created:

apexCharts.getElement().executeJs("this.config.chart.stackType='100%'; this.chartComponent.updateOptions(this.config)");

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
1 participant