Line Chart - Learn JBStrap

Overview

A line chart is a series of data points connected with lines. A line chart can contain one or more lines. An area chart is an axis-based chart that has an X and Y axis. Data points are placed on these two axes. All displayed data series constitute a separate line of different color. Each line 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.

Customization

Line colors on a line chart are automatically assigned, but can also be specified. Line type can be modified and lines can be displayed as curves, stepped or dashed lines. Line thickness can also be modified.

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 thus the click events and tooltips also do not work.

Features

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

Example

  Creating a simple Line Chart  
        
@Public
public class CreateLineChart extends BasePage {

	@Override
	public void build() {
		// Chart creation
		final ChartCanvas chartCanvas = new ChartCanvas();
		// LineChart creation with dataDescriptor and category columnName
		final LineChart lineChart = new LineChart("firstChart", JBStrap.getDataDescriptor("dummyChartDD"), "category");
		// LineSeries creation with data columnName
		final LineSeries lineSeries =  new LineSeries("First LineChart", "data");

		// Add lineSeries to lineChart
		lineChart.addSeries(lineSeries);
		// Add lineChart to chartCanvas
		chartCanvas.addChart(lineChart);


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