Horizontal Stacked Bar Chart

Overview

A horizontal stacked bar chart is a bar chart that displays data series as bars. A chart may contain one or more data series. If multiple series are displayed on a horizontal stacked bar chart, the series are display after one another. This chart is an axis-based chart, but it is also horizontal. It has an X and a Y axis that are rotated 90° compared to a regular chart, making the X axis vertical and the Y axis the horizontal axis. 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 stacked 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
HorizontalStackedBarChart

Example

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

	@Override
	public void build() {
		// Chart creation
		final ChartCanvas chartCanvas = new ChartCanvas();
		// HorizontalStackedBarChart creation with dataDescriptor and category columnName
		final HorizontalStackedBarChart horizontalStackedBarChart = new HorizontalStackedBarChart("firstChart", JBStrap.getDataDescriptor("dummyChartDD"), "category");
		// HorizontalStackedBarChart creation with data columnName
		final Series horizontalStackedBarSeries =  new Series("First horizontalStackedBarChart", "data");
		final BarSeries horizontalStackedBarSeries2 =  new BarSeries("Second horizontalStackedBarChart", "data2");

		// Add horizontalStackedBarSeries to horizontalStackedBarChart
		horizontalStackedBarChart.addSeries(horizontalStackedBarSeries);
		horizontalStackedBarChart.addSeries(horizontalStackedBarSeries2);
		// Add horizontalStackedBarChart to chartCanvas
		chartCanvas.addChart(horizontalStackedBarChart);


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