apexcharts-flow icon indicating copy to clipboard operation
apexcharts-flow copied to clipboard

100% stacked column chart doesn't work

Open firestormdong opened this issue 3 years ago • 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

firestormdong avatar Feb 24 '22 20:02 firestormdong

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

firestormdong avatar Feb 24 '22 21:02 firestormdong

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

firestormdong avatar Feb 25 '22 03:02 firestormdong