Automatically generated color in chart is different from corresponding color in chart legend (Vaadin 17)

[NicolasErnst]

I have created a pie chart following the online example at https://demo.vaadin.com/charts/PieWithLegend.

Unfortunately the color of the second legend entry does not match the corresponding color in the pie chart. All other entries seem to match the colors in the pie charts.

This can be easily reproduced by using the example from the link under Vaadin 17 and it seems to affect various / all diagram types.

[yuriy-fix]

Dear @NicolasErnst ,
Could you please provide a code snippet to reproduce the issue.
Are you using java API to set colors?
Do you have a custom theme? Are you including the default theme or customizing the custom css properties for colors?

[NicolasErnst]

Hello @yuriy-fix,
I use the Java API to create the diagrams. However, I do not set colors, neither via the API nor via CSS properties. I use the colors generated by Vaadin Charts.
I also do not use a custom theme.

Here is the requested code snippet to reproduce:

public void drawMinimalExample() {
	Chart pieChart = new Chart(ChartType.PIE); 
		
	PlotOptionsPie plotOptions = new PlotOptionsPie(); 
	plotOptions.setShowInLegend(true);
		
	DataSeries data = new DataSeries(); 
	data.add(new DataSeriesItem("One", 1));
	data.add(new DataSeriesItem("Two", 2));
	data.add(new DataSeriesItem("Three", 3));
		
	Configuration conf = pieChart.getConfiguration();
	conf.setTitle("Minimal example");
	conf.setPlotOptions(plotOptions);
	conf.setSeries(data);
		
	add(pieChart);
}

This snippet leads to the following diagram:

When you add more DataSeriesItems, you can see that the colors of element two and four are reversed:

 public void drawMinimalExample() {
	Chart pieChart = new Chart(ChartType.PIE); 
		
	PlotOptionsPie plotOptions = new PlotOptionsPie(); 
	plotOptions.setShowInLegend(true);
		
	DataSeries data = new DataSeries(); 
	data.add(new DataSeriesItem("One", 1));
	data.add(new DataSeriesItem("Two", 2));
	data.add(new DataSeriesItem("Three", 3));
	data.add(new DataSeriesItem("Four", 4));
	data.add(new DataSeriesItem("Five", 5));
	data.add(new DataSeriesItem("Six", 6));
	data.add(new DataSeriesItem("Seven", 7));
	data.add(new DataSeriesItem("Eight", 8));
	data.add(new DataSeriesItem("Nine", 9));
	data.add(new DataSeriesItem("Ten", 10));
	data.add(new DataSeriesItem("Eleven", 11));
	data.add(new DataSeriesItem("Twelve", 12));
	data.add(new DataSeriesItem("Thirteen", 13));
	data.add(new DataSeriesItem("Fourteen", 14));
	data.add(new DataSeriesItem("Fifteen", 15));
		
	Configuration conf = pieChart.getConfiguration();
	conf.setTitle("Minimal example");
	conf.setPlotOptions(plotOptions);
	conf.setSeries(data);
		
	add(pieChart);
}

[NicolasErnst]

By the way, I do not know if the following is desired behaviour:

public void drawMinimalExample() {
	Chart pieChart = new Chart(ChartType.PIE); 
		
	PlotOptionsPie plotOptions = new PlotOptionsPie(); 
	plotOptions.setShowInLegend(true);
		
	DataSeries data = new DataSeries(); 
	data.add(new DataSeriesItem("One", 1));
	data.add(new DataSeriesItem("Two", 2));
	DataSeriesItem pinkItem = new DataSeriesItem("Three", 3); 
	pinkItem.setColor(SolidColor.PINK);
	data.add(pinkItem);
		
	Configuration conf = pieChart.getConfiguration();
	conf.setTitle("Minimal example");
	conf.setPlotOptions(plotOptions);
	conf.setSeries(data);
		
	add(pieChart);
}

Here I tried to color the third element pink. But as you can see in the following picture, the color is only changed in the legend but not in the diagram.

[alvarezguille]

Hi @NicolasErnst

I tried your snippet in this simple project skeleton-starter-flow-chart-17.zip and it looks like this.

Is it possible that you have setup a css theme for charts in your project?
Something like <dom-module id="chart" theme-for="vaadin-chart"> and defining values for --vaadin-charts-color-0, --vaadin-charts-color-1, etc?
If you generated the project from start.vaadin.com before Vaadin 17 was released it could be part of global-styles.js.

There is more info about migrating to latest charts version depending on how you want to apply styles in vaadin.com/docs

[NicolasErnst]

Hello @alvarezguille,

I created my project back then with Vaadin 14 and upgraded it to Vaadin 17 step by step. I found defined values for --vaadin-charts-color-0, etc. in a file called shared-styles.js. I am sorry I did not know that the Vaadin Starter Project already uses a custom css theme and defines these values by default. Removing them solved the problem, thank you!