100% stacked column chart doesn't work
firestormdong opened this issue · 2 comments
firestormdong commented
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 commented
I think I found the cause.
The option chart.stackType
is encoded as full
, not 100%
.
firestormdong commented
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)");