Donut Chart - Learn JBStrap

Overview

A donut chart is a circle diagram with an empty area in the middle. The chart displays data series As a circle with data points visualized as the slices of a circle. The length of each slice is determined by calculating their proportion to the entire circle. The color of circle slices is automatically determined, but you can also specify them. Each circle slice is displayed separately on the legend, providing information to the user about the chart’s data categories. Slices are automatically displayed in percentage (meaning what percentage of the entire circle they represent).

Customization

You can modify if the actual data values, a percentage or no labels should be displayed on the slice. Slice thickness is automatically calculated, but you can also modify it. As mentioned, the colors of the chart are automatically determined, but you can specify them.

Features

	Lasso	Brush	Zoom	Dot Tooltip	Line Tooltip	Simple Tooltip	Custom Tooltip	Click event
DonutChart

Example

  Creating a simple Donut Chart  
        
import com.jbstrap.ui.components.layout.Container;

@Public
public class CreateDonutChart extends BasePage {

	@Override
	public void build() {
		// Chart creation
		final ChartCanvas chartCanvas = new ChartCanvas();
		// DonutChart creation with dataDescriptor and category columnName
		final DonutChart donutChart = new DonutChart("firstChart", JBStrap.getDataDescriptor("dummyChartDD"), "category");
		// Series creation with data columnName
		final Series series =  new Series("First Donut chart", "data");


		// Add series to donutChart
		donutChart.setSeries(series);
		// Add donutChart to chartCanvas
		chartCanvas.addChart(donutChart);


        final Card comment = new Card().addComponent(new Paragraph("Creating a Chart Canvas and a simple Donut Chart on it."));
 
        final Container mapContainer = new Container().setHeight75().addStyleClass("mt-3").addComponent(chartCanvas);
        final Container commentContainer = new Container().setHeight25().addComponent(comment);
 
        addComponents(mapContainer, commentContainer);

	}

}

Overview

Customization

Features

Example

Related pages