BoxPlot Example

[BrayanMnz]

Hey team -

I cannot see any example related to the BoxPlot chart type, I am trying to implement a BoxPlot chart but cannot really make it work.

Any helpful example that you can provide?

[Loahrs]

Hey! Thank you for that question. I see where your struggles come from, because building Boxplots is a bit unintuitive here. But the good news: It's possible!

I created this Boxplot as an example:

Here is the code snippet I used:

public class BoxPlotChartExample extends ApexChartsBuilder {
    public BoxPlotChartExample() {
        withChart(ChartBuilder.get()
                .withType(Type.BOXPLOT)
                .build())
                .withSeries(SeriesBuilder.<BoxPlotData>get()
                    .withData(new BoxPlotData[]{
                                new BoxPlotData("Q1", new Integer[]{7, 15, 36, 55, 77}),
                                new BoxPlotData("Q2", new Integer[]{7, 25, 38, 57, 68}),
                                new BoxPlotData("Q3", new Integer[]{7, 15, 36, 55, 77}),
                                new BoxPlotData("Q4", new Integer[]{7, 25, 38, 57, 68})
                    }).build()
                ).build();
    }

    //We need to put our data into a data structure that macthes the docs:
    public record BoxPlotData(String x, Integer[] y) {}
}

The point is, that BoxPlots in ApexCharts are using a different data structure compared to other charts. (see: https://apexcharts.com/docs/chart-types/boxplot/#boxplot-data). We can use the generic SeriesBuilder and give it elements with the fitting data structure.

This will generate the matching JSON-Structure of:

  series: [{
    data: [{
      x: "Q1",
      y: [7, 15, 36, 55, 77]
    },
    {
      x: "Q2",
      y: [7, 25, 38, 57, 68]
    },
    .
    .
    .
    {
      x: "Q4",
      y: [7, 25, 38, 57, 68]
    }]
  }]

[BrayanMnz]

Thanks for the example provided.

I was able to put it to work on my side