[Question] Is there a way to execute code based on a mouse-click event?

[oli37]

Hi everyone,

I am trying to view further information by clicking onto one of the bars on a barchart. Unfortunately I couldn't find a way to do get the value or element-number of a clicked bar. Is there any way to do that? (Possibly by a short code-example)

Thanks in advance
-oliver

[appreciated]

@oli37 currently there is not. While apexcharts offers this possibility probably, this addon does not support the whole API. But you may provide a pull request that does. The apexcharts API is huge, supporting everything requires a lot of work, this project is more about supporting it piece by piece.

[TFyre]

This needs some refactoring and checking, but should get you started!!

    @ClientCallable
    public void handleChartClickEvent(final Integer dataPointIndex, final String categoryLabel) {
    }

    private String getChartClickEvent() {
        final String id = getId().orElseGet(() -> {
            final String newId = getClass().getSimpleName();
            setId(newId);
            return newId;
        });
        return String.format("function(event, chartContext, config) { "
                + "var element = document.getElementById(\"%s\"); "
                + "element.$server.handleChartClickEvent(config.dataPointIndex, config.globals.categoryLabels[config.dataPointIndex]);"
                + " }", id);
    }


//Creating the chart
        final ApexCharts chart = ApexChartsBuilder.get()
                .withChart(ChartBuilder.get()
                        .withEvents(EventsBuilder.get()
                                .withClick(getChartClickEvent())
                                .build())
                        .build()
                ).build();

When annotating a method with @ClientCallable, vaadin creates $server on the element
To get this element in the context of the Click event, you can use document.getElementById

More info on vaadin flow rpc: here