In Vaadin 24, after clicking all Pie chart's Legend Items, Pie chart should not visible

Flow
1

We have upgraded from Vaadin 14 to 24.
Below Pie chart, after clicking all Legend Items, Pie chart should be not visible, but still Pie chart appeared with default blue color.
image

2

Sounds like a possible bug that should be created in the web- or flow-components repo on GitHub.

1 Like
3

Hi, in which Vaadin 24 exact version are you having this issue? I did a quick test in Vaadin 24.3.10 and 24.4.0.beta1 and wasn’t able to reproduce it.

        Chart chart = new Chart(ChartType.PIE);

        Configuration conf = chart.getConfiguration();

        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", 15));
        series.add(new DataSeriesItem("Item 3", 5));
        conf.setSeries(series);

        add(chart);

pie-chart

Can you share a code example maybe?

4

Hi @paola.debartolo , thanks for the quick response. Please find the below code snippet for Pie chart.

DataSeries dataSeries = new DataSeries(listDataSeries);
Configuration conf = chart.getConfiguration();
conf.setSeries(dataSeries);
conf.getyAxis().setVisible(false);
conf.getxAxis().setVisible(false);
PlotOptionsPie plotOptions = new PlotOptionsPie();
plotOptions.setShowInLegend(true);
DataLabels dataLabels = new DataLabels();
dataLabels.setEnabled(false);
plotOptions.setDataLabels(dataLabels);
plotOptions.setSize(“80%”);
conf.setPlotOptions(plotOptions);
Legend legend = conf.getLegend();
legend.setLayout(LayoutDirection.VERTICAL);
legend.setAlign(HorizontalAlign.CENTER);
legend.setVerticalAlign(VerticalAlign.BOTTOM);
conf.setLegend(legend);
conf.getChart().setStyledMode(true);
conf.getChart().setType(ChartType.PIE);
chart.drawChart();

5

It seems the problem is when styleMode is set. I added conf.getChart().setStyledMode(true); like you have in your example and I was able to reproduce it. I think @knoobie was right and this is indeed a bug and it would be good if you can reported on github as he mentioned.

As a workaround, in your vaadin-chart.css file (in the components folder), you could add this rule that would make the pie look empy as it should when no series are being shown:

:host(.my-pie) .highcharts-empty-series {
    fill: none;
    stroke: rgb(204, 204, 204);
}

“my-pie” is a class name you need to add to the chart as chart.addClassName("my-pie");

6

Hi @paola.debartolo,
tried with above code snippet, there is a dependency with that.

Other way I have tried, that commented as below
//conf.getChart().setStyledMode(true);

Now when I click all Legends Pie chart get disappeared.
Pie_chart_disappeared

But Legends are not in sync with Pie Chart as below.

Can you help me?

Thanks,
Surendhar

7

Below are non-sync colors of legends of Pie chart
image

8

Hello, it seems that you’re changing the color of the series item but not the legend. Not sure how you’re setting the colors but here are two options:

You could just set the colors in the SeriesDataItem, like this:

        DataSeries series = new DataSeries();
        DataSeriesItem item1 = new DataSeriesItem("Item 1", 60);
        item1.setColor(SolidColor.ORANGE);
        series.add(item1);
        DataSeriesItem item2 = new DataSeriesItem("Item 2", 15);
        item2.setColor(SolidColor.PINK);
        series.add(item2);
        conf.setSeries(series);

or you could do it with css rules:

:host(.my-pie) .highcharts-color-0 {
    fill: pink;
}

:host(.my-pie) .highcharts-legend-item.highcharts-color-0 .highcharts-point {
    fill: pink;
}

Hope this helps.