vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
470 stars 83 forks source link

[vaadin-charts] Hover State Issue on Pie Chart with Lumo Theme #8196

Open byte0ne opened 1 day ago

byte0ne commented 1 day ago

Description

As soon as ChartOptions.get().setTheme(...); (with Lumo themes) is used, the hovering state of the pie chart gets broken:

Vaadin Pie Chart Issue

This applies to LumoDarkTheme and LumoLightTheme as well.

Expected outcome

Only the hovered DataSeriesItem of the pie chart should be shown as "active". The others should be displayed as "inactive".

Minimal reproducible example

Chart chart = new Chart(ChartType.PIE);

Configuration conf = chart.getConfiguration();
//ChartOptions.get().setTheme(new LumoDarkTheme()); //<- would also happen here

PlotOptionsPie plotOptions = new PlotOptionsPie();
plotOptions.setCursor(Cursor.POINTER);
plotOptions.setShowInLegend(true);
conf.setPlotOptions(plotOptions);

DataSeries series = new DataSeries();
series.add(new DataSeriesItem("Item 1", 60));
series.add(new DataSeriesItem("Item 2", 30));
series.add(new DataSeriesItem("Item 3", 10));
conf.setSeries(series);

Button btn = new Button("Change Theme");
btn.addClickListener(event -> {
    ChartOptions.get().setTheme(new LumoDarkTheme());
    chart.drawChart(true);
});

add(chart, btn);

Steps to reproduce

Run the code

Environment

Vaadin version(s): 24.5.2 OS: MacOS 15.1.1 (24B91)

Browsers

Chrome, Firefox, Safari