Stacked Bar Chart - Learn JBStrap

Overview

A stacked bar chart is a bar chart that displays data series as columns. A chart may contain one or more data series. If you display multiple data series on a bar chart, the series are displayed above one another (bars are stacked). Bars are visualized on the chart according to this rotation. All displayed data series constitute a separate column of different color. Each bar is separately displayed in the legend. The legend shows the user the type of data for each series. Users are allowed to enable or disable each bar by clicking on legend items.

Customization

Bar colors on a horizontal bar chart are automatically chosen but can also be specified. By default, columns contain all associated values and the bars’ corners are not rounded. You can change these settings, rounding off bar corners. You can also control where each data point is displayed or if they should be displayed at all.

Marker settings also work with horizontal stacked bar charts, but they only modify the legend’s appearance; markers are not displayed on individual columns. Markers are not displayed on columns, therefore users can select data points and display a tooltip by clicking on the entire area of a bar.

Features

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

Example

  Creating a simple Stacked Bar Chart  
        
@Public
public class CreateStackedBarChart extends BasePage {

	@Override
	public void build() {
		// Chart creation
		final ChartCanvas chartCanvas = new ChartCanvas();
		// StackedBarChart creation with dataDescriptor and category columnName
		final StackedBarChart stackedBarChart = new StackedBarChart("firstChart", JBStrap.getDataDescriptor("dummyChartDD"), "category");
		// StackedBarSeries creation with data columnName
		final Series stackedBarSeries =  new Series("First stackedBarChart", "data");
		final BarSeries stackedBarSeries2 =  new BarSeries("Second stackedBarChart", "data2");

		// Add stackedBarSeries to stackedBarChart
		stackedBarChart.addSeries(stackedBarSeries);
		stackedBarChart.addSeries(stackedBarSeries2);
		// Add stackedBarChart to chartCanvas
		chartCanvas.addChart(stackedBarChart);


        final Card comment = new Card().addComponent(new Paragraph("Creating a Chart Canvas and a simple stacked bar 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