appreciated/apexcharts-flow

Column Chart Grouped and Stacked

Closed this issue · 1 comments

Describe the solution you'd like
I want to show data in Stacked Column chart with different series grouped together as shown in attached picture

Screenshot 2024-06-06 at 11 14 45 AM

And there is no option to mention Group in Series.java see the screenshow
Screenshot 2024-06-06 at 11 15 11 AM

I created a PR to add another constructor and added a field for property "group".

This makes it possible to create something like this: https://apexcharts.com/javascript-chart-demos/column-charts/grouped-stacked-columns/

Screenshot 2024-06-11 at 13-11-56 Screenshot

ApexCharts chart = ApexChartsBuilder.get()
                .withSeries(new Series<>("Q1 Budget","budget", 44000, 55000, 41000, 67000, 22000, 43000),
                        new Series<>("Q1 Actual","actual",  48000, 50000, 40000, 65000, 25000, 40000),
                        new Series<>("Q2 Budget","budget",  13000, 36000, 20000, 8000, 13000, 27000),
                        new Series<>("Q2 Actual","actual",  20000, 40000, 25000, 10000, 12000, 28000)
                )
                .withChart(ChartBuilder.get()
                        .withType(Type.BAR)
                        .withStacked(true)
                        .withHeight("350")
                        .build())
                .withStroke(StrokeBuilder.get()
                        .withColors("#fff")
                        .withWidth(1.0)
                        .build())
                .withDataLabels(DataLabelsBuilder.get()
                        .withFormatter("""
                                (val) => {
                                    return val / 1000 + "K"
                                }
                                """)
                        .build())
                .withPlotOptions(PlotOptionsBuilder.get()
                        .withBar(BarBuilder.get()
                                .withHorizontal(false)
                                .build())
                        .build())
                .withXaxis(XAxisBuilder.get().withCategories(
                        "Online advertising",
                        "Sales Training",
                        "Print advertising",
                        "Catalogs",
                        "Meetings",
                        "Public relations").build())
                .withFill(FillBuilder.get()
                        .withOpacity(1.0).build())
                .withColors("#80c7fd", "#008FFB", "#80f1cb", "#00E396")
                .withYaxis(YAxisBuilder.get()
                        .withLabels(LabelsBuilder.get()
                                .withFormatter("""
                                        (val) => { return (val / 1000) + "K" }
                                        """)
                                .build())
                        .build())
                .withLegend(LegendBuilder.get()
                        .withPosition(Position.TOP)
                        .withHorizontalAlign(HorizontalAlign.LEFT)
                        .build())
                .build();