Bullet Chart - Learn JBStrap

Overview

This chart type visualizes a measurement and compares it one or more other measurements. It helps you to compare a target value to the current value and the current value to three ranges designating a low, a medium and a high performance range. The chart is visualized as a horizontal bar split into three ranges with different colors. From left to right, ranges denote low, medium and high values, respectively. In the center of the chart, a bar extends from left to right, denoting the current value. A vertical line designates the place of the target value on the chart.

Customization

You can specify the color of the ranges, as well as the color of the bar.

Features

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

Example

  Creating a simple Bullet Chart  
        
@Public
public class CreateBulletChart extends BasePage {

	@Override
	public void build() {
		// Chart creation
		final ChartCanvas chartCanvas = new ChartCanvas();
		// BulletChart creation
		final BulletChart bulletChart = new BulletChart("chart1", "Revenue 1")
			// Set the current value of the bulletChart
			.setCurrentValue(180L)
			// Set the target value of the bulletChart
			.setTargetValue(250L)
			// Set the 3 levels values of the bulletChart
			.setLevels(150L, 225L, 300L);


		// Add bulletChart to chartCanvas
		chartCanvas.addChart(bulletChart);


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