appreciated/apexcharts-flow

100% stacked column chart doesn't work

firestormdong opened this issue · 2 comments

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

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

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)");