apexcharts-flow
apexcharts-flow copied to clipboard
100% stacked column chart doesn't work
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)");