Area Chart - Learn JBStrap

Overview

An area chart is an axis-based chart, the data points are placed on these two axes. This chart is a series of data points connected with lines, with a colored area below the lines. An area chart can contain one or more areas. You can specify if an area should be filled with a solid color or a color gradient. All displayed data series constitute a separate area of different color. Each area 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 area by clicking on legend items. Line type can be modified and lines can be displayed as curves, stepped or dashed lines. Line thickness can also be modified.

Customization

By default, the markers on the displayed line show the position of each data point, the color, shape and size of which can be modified. You can also turn off the markers. Once turned off, markers are not visible and the click events and the tooltips also do not work.

Features

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

Example

  Creating an Area Chart  
        
@Public
public class CreateAreaChart extends BasePage {

	@Override
	public void build() {
		// Chart creation
		final ChartCanvas chartCanvas = new ChartCanvas();
		// AreaChart creation with dataDescriptor and category columnName
		final AreaChart areaChart = new AreaChart("firstChart", JBStrap.getDataDescriptor("dummyChartDD"), "category");
		// AreaSeries creation with data columnName
		final AreaSeries areaSeries =  new AreaSeries("First areaChart", "data");

		// Add areaSeries to areaChart
		areaChart.addSeries(areaSeries);
		// Add areaChart to chartCanvas
		chartCanvas.addChart(areaChart);


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