Vaadin Chart Suggestion

Flow
1

I wish to have a graph as similar to this [https://ibb.co/dLev2p]
(https://ibb.co/dLev2p). I’m able achieve it partially but I’m not able to get that center count part. How to achieve the same? Do I need to use SOLIDGAUGE or PIE as ChartType?

Currently I’m using ChartType as PIE. And to achieve the hollow part in center, I’m writing below code. [https://ibb.co/eEUgQ9]
(https://ibb.co/eEUgQ9)

PlotOptionsPie plotOptions=new PlotOptionsPie();
plotOptions.setInnerSize("50%");

But now how to put that count(985 as in image) in center?

Note: I’m using Vaadin Charts 3.2.1 and Java 8

2

You could try a DonutChart. https://demo.vaadin.com/charts/#DonutChart
Make the inner pie 100% and white and then set its caption.

3

Ronny Edler:
You could try a DonutChart. https://demo.vaadin.com/charts/#DonutChart
Make the inner pie 100% and white and then set its caption.

Thanks for the suggestion. I tried the same I’m able to achieve some thing like this [Chart]
(https://ibb.co/hjkOsp).
Currently I’m setting centre value as

private static Color[] colors = new ValoLightTheme().getColors();
Color[] innerColors = Arrays.copyOf(colors, 2);
innerSeries.setData(new String[] { "Total Count: 58"}, new Number[]
 {58}, innerColors);

Is this how you meant to set the caption? And how to make background as white color?

My current code is:

	public static Chart createChart() {
        Chart chart = new Chart(ChartType.PIE);
        Configuration conf = chart.getConfiguration();
        conf.setTitle("Browser market share");

        DataSeries innerSeries = new DataSeries();
        innerSeries.setName("Total Equip Count");
        PlotOptionsPie innerPieOptions = new PlotOptionsPie();
        innerSeries.setPlotOptions(innerPieOptions);
        innerPieOptions.setSize("85%");
        innerPieOptions.setDataLabels(new DataLabels());
        innerPieOptions.getDataLabels().setFormatter("this.y >0 ? this.point.name : null");
        innerPieOptions.getDataLabels().setColor(new SolidColor(255, 255, 255));
        innerPieOptions.getDataLabels().setDistance(-150);

        Color[] innerColors = Arrays.copyOf(colors, 1);
		//this is where I'm setting my centre count
        innerSeries.setData(new String[] { "Total Count: 58"}, new Number[]
 {58}, innerColors);

        DataSeries outerSeries = new DataSeries();
        outerSeries.setName("Count");
        
        PlotOptionsPie outerSeriesOptions = new PlotOptionsPie();
        outerSeries.setPlotOptions(outerSeriesOptions);
        outerSeriesOptions.setInnerSize("65%");
        outerSeriesOptions.setSize("85%");
        outerSeriesOptions.setDataLabels(new DataLabels());
        outerSeriesOptions.getDataLabels().setFormatter("this.y > 0 ? ''+ this.point.name +': '+ this.y  : null");

        DataSeriesItem[] outerItems = new DataSeriesItem[]
 {
                new DataSeriesItem("IE", 10, color(5)),
                new DataSeriesItem("Firefox", 20, color(1)),
                new DataSeriesItem("Chrome", 30, color(2)),
                new DataSeriesItem("Safari", 40, color(3)),
                new DataSeriesItem("Opera", 50, color(4))
        };

        outerSeries.setData(Arrays.asList(outerItems));
        conf.setSeries(innerSeries, outerSeries);
        chart.drawChart(conf);

        return chart;
    }