Hovering on legend item in chart does not work correctly.

[abdullahtellioglu]

What is the problem?

When I open dialog at the first time, hovering on a legend item does not select the correct one. Everything works fine after calling chart.draw() method.

chart-issue.mov

Browsers

• Chrome
• Firefox
• Safari
• Safari on iOS
• Edge

Screen Readers

• None
• NVDA
• JAWS
• VoiceOver on MacOS
• VoiceOver on iOS

[rolfsmeds]

It actually looks like the wrong legend is highlighted as well, if you look closely between 0:01 and 0:04, the hover does not match the pointer position, but instead the hover style is applied to the legend below the pointer position. So the highlighted legend seems to match the highlighted series in the chart, but neither match the position of the pointer.

This feels like a HighCharts issue, as everything inside the chart area is just HighCharts in a wrapper, but I can't find any matching issue in the HighCharts repo.

• Which Vaadin versions are we looking at here?
• Do you have browser zoom applied, or a CSS transform in use?
• Could you check if hovering on the chart areas themselves works correctly, or if a similar vertical offset is happening there too?
• Can you move the chart out of the dialog and see if the issue can be reproduced there?
• Can you share the code for setting up that chart?

[abdullahtellioglu]

This happens inside the chart container as you said.

• Vaadin version -> 23.3.2
• No zoom, no CSS transform. Only default highcharts css rules are applied.
• Hovering on chart areas has no effect.
• I have not tried to move chart out of the dialog since implementation of chart and logic are coupled.
• The chart library is in another library. Therefore I can only share configuration of the chart and usages in the dialog.

The configuration of the chart is almost identical as V8 version. Same issue does not happen on the V8 version btw.

```
    // this is where chart is initialized and added to layout. 
    private void initContent() {
            HorizontalLayout horizontalLayout = VaadinGuiControlBuilder.createHorizontalLayout(true, true);
            horizontalLayout.setHeight("400px");
            this.chart = new CashbackChart();
            horizontalLayout.add(this.createColumn1());
            horizontalLayout.addAndExpand(this.chart.getChartComponent());
        }
        
        // this is executed when button is clicked 
        private void calculateCashback() {
            Integer minAlter = 30;
            Integer maxAlter = 67;
            this.chart.setXAxisCategories(minAlter.toString() + " Jahre", "", "", "", maxAlter.toString() + " Jahre");
            this.setDataSeriesFromHochrechnungen();
            this.chart.draw();
        }

        // configuration for the chart inside another module.
        private Configuration getConfiguration() {
	        Configuration config = new Configuration();
	        config.setTitle("");
	        config.getChart().setBackgroundColor(new SolidColor(255, 255, 255, 0));
	        Legend legend = config.getLegend();
	        legend.setBackgroundColor(new SolidColor(255, 255, 255, 0));
	        legend.setItemWidth(400);
	        Style legendStyle = new Style();
	        legendStyle.setFontWeight(FontWeight.BOLD);
	        legendStyle.setFontSize("14px");
	        legend.setY(15);
	        legend.setTitle(new LegendTitle("Mögliches Kapital bei einer angenommenen Brutto-Wertentwicklung von"));
	        legend.setItemStyle(legendStyle);
    
    
	        Style legendItemStyle = new Style();
	        legendItemStyle.setColor(new SolidColor("#808080"));
	        legendItemStyle.setFontSize("14px");
	        legendItemStyle.setFontWeight(FontWeight.BOLD);
	        legend.setItemStyle(legendItemStyle);
    
	        ArrayList<String> names = new ArrayList<>();
	        ArrayList<Double> values = new ArrayList<>();
	        XAxis xAxis = new XAxis();
	        xAxis.setVisible(false);
	        xAxis.setGridLineWidth(0);
	        xAxis.setMinorGridLineWidth(0);
	        xAxis.setMinorGridLineColor(new SolidColor(0,0 ,0,0));
	        xAxis.setGridLineColor(new SolidColor(0,0,0,0));
    
	        xAxis.setTitle("");
	        YAxis yAxis = new YAxis();
	        yAxis.setTitle("");
	        Labels yAxisLabels = new Labels(false);
	        yAxis.setLabels(yAxisLabels);
	        yAxis.setOpposite(true);
	        yAxis.setGridLineWidth(0);
    
	        Labels xAxisLabels = new Labels();
	        Style labelStyle = new Style();
	        labelStyle.setColor(new SolidColor(128, 128, 128));
	        labelStyle.setFontSize("14px");
	        xAxisLabels.setStyle(labelStyle);
	        xAxis.setLabels(xAxisLabels);
    
	        config.addxAxis(xAxis);
	        config.addyAxis(yAxis);
	        return config;
            }

[rolfsmeds]

I doubt it's related, but could you try removing legend.setY(15);?