How can I customize the tooltip?

[erickSantos93]

I have created a graph using Apexchart with Vaadin 14, but I want to be able to customize the tooltip that is displayed on the graph when selecting any point. I would like to be able to enter the name of my series and then the coordinates. name + x + y

Below I show an example of how I want my information to be displayed.

[Loahrs]

Hey @erickSantos93

That's a good question! If you look it up in the official ApexChartsJS docs, you'll find this here: https://apexcharts.com/docs/options/tooltip/

Tooltips have a "custom" attribute that allows you to specify a custom JS function. This is actually what you could do in the ApexCharts Vaadin Wrapper too:

public class BubbleChartExample extends ApexChartsBuilder {
    public BubbleChartExample() {
        withChart(
                ChartBuilder.get()
                        .withType(Type.BUBBLE)
                        .withZoom(ZoomBuilder.get()
                                .withEnabled(false)
                                .build())
                        .build())    
                //define the tooltips properties as usual: 
                .withTooltip(TooltipBuilder.get()
                        .withCustom(getCustomTooltip())
                        .withTheme("dark")
                        .build())
                //
                .withDataLabels(DataLabelsBuilder.get()
                        .withEnabled(false)
                        .build())
                .withFill(FillBuilder.get().withOpacity(0.8).build())
                .withSeries(new Series<>("Bubble1", new Double[]{637.0, 52.0, 46.0}, // {X, Y, <Bubble Size>}
                                new Double[]{162.0, 59.0, 33.0},
                                new Double[]{400.0, 52.0, 60.0},
                                new Double[]{561.0, 54.0, 39.0},
                                new Double[]{731.0, 27.0, 67.0},
                                new Double[]{697.0, 60.0, 33.0}),
                        new Series<>("Bubble2", new Double[]{73.0, 32.0, 74.0},
                                new Double[]{459.0, 31.0, 65.0},
                                new Double[]{386.0, 44.0, 60.0},
                                new Double[]{671.0, 28.0, 53.0},
                                new Double[]{125.0, 33.0, 50.0},
                                new Double[]{745.0, 45.0, 28.0}),
                        new Series<>("Bubble3", new Double[]{502.0, 60.0, 57.0},
                                new Double[]{121.0, 58.0, 51.0},
                                new Double[]{108.0, 42.0, 55.0},
                                new Double[]{556.0, 35.0, 62.0},
                                new Double[]{331.0, 36.0, 53.0},
                                new Double[]{251.0, 49.0, 25.0}))
                .withXaxis(XAxisBuilder.get().withTickAmount(new BigDecimal("10")).withType(XAxisType.NUMERIC).build())
                .withYaxis(YAxisBuilder.get().withMax(70.0).build());
    }

    private String getCustomTooltip() {
        return """
            function({ series, seriesIndex, dataPointIndex, w }) {
            console.log(series);
            console.log(seriesIndex);
            console.log(dataPointIndex);
            console.log(w);
            let actualSeries = w.config.series
                return '<span>' + actualSeries[seriesIndex].name + ': (' +  actualSeries[seriesIndex].data[dataPointIndex][0] + ',' + actualSeries[seriesIndex].data[dataPointIndex][1] + ')' + '</span>'
             }
           """;
    }
}

This builder is responsible for creating a Tooltip-Object as documented in the official docs:

 .withTooltip(TooltipBuilder.get()
         .withCustom(getCustomTooltip())
         .withTheme("dark")
         .build())

I created a helper function to create a string of a custom JS function as required by ApexChartsJS:

private String getCustomTooltip() {
        return """
            function({ series, seriesIndex, dataPointIndex, w }) {
            console.log(series);
            console.log(seriesIndex);
            console.log(dataPointIndex);
            console.log(w);
            let actualSeries = w.config.series
                return '<span>' + actualSeries[seriesIndex].name + ': (' +  actualSeries[seriesIndex].data[dataPointIndex][0] + ',' + actualSeries[seriesIndex].data[dataPointIndex][1] + ')' + '</span>'
             }
           """;
    }