Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Column Chart Grouped and Stacked #182

Closed
saifidrees opened this issue Jun 6, 2024 · 1 comment
Closed

Column Chart Grouped and Stacked #182

saifidrees opened this issue Jun 6, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@saifidrees
Copy link

saifidrees commented Jun 6, 2024

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

@saifidrees saifidrees added the enhancement New feature or request label Jun 6, 2024
@Loahrs
Copy link
Collaborator

Loahrs commented Jun 11, 2024

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

@Loahrs Loahrs closed this as completed Jun 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants