Bar Chart - Learn JBStrap

Overview

A bar chart 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 display next to each other. 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 determined but can also be specified. By default, columns contain all associated values and the bars’ corners are not rounded. You can decide where each data point is displayed or if they should be displayed at all.

Features

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

Example

  Creating a Bar Chart  
        
@Public
public class CreateBarChart extends BasePage {

	@Override
	public void build() {
		// Chart creation
		final ChartCanvas chartCanvas = new ChartCanvas();
		// BarChart creation with dataDescriptor and category columnName
		final BarChart barChart = new BarChart("firstChart", JBStrap.getDataDescriptor("dummyChartDD"), "category");
		// BarSeries creation with data columnName
		final BarSeries barSeries =  new BarSeries("First barChart", "data");

		// Add barSeries to barChart
		barChart.addSeries(barSeries);
		// Add barChart to chartCanvas
		chartCanvas.addChart(barChart);


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