Skip to main content
Version: 5.7

Stacked Line chart

A stacked line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.

Programmatically, you could use a stacked line chart as following:

// creates the chart    
StackedLineChart chart = new StackedLineChart();
// adds to DOM
component.add(chart);
...
// example for Elemental2
// gets the chart instance as DOM element
Element element = chart.getChartElement().as();
// adds to DOM
DomGlobal.document.body.appendChild(element);

By UIBinder (ONLY for GWT), you could use a line chart as following:

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:c="urn:import:org.pepstock.charba.client.gwt.widgets">

<g:HTMLPanel width="100%">
....
<c:StackedLineChartWidget ui:field="chart"/>
...
</g:HTMLPanel>
</ui:UiBinder>

Dataset

The stacked line chart allows a number of properties to be specified for each stacked line dataset. These are used to set display properties for a specific dataset.

Every chart has got a method to create a typed dataset accordingly with the chart type. The dataset can be also created instantiating the constructor.

// creates the chart
StackedLineChart chart = new StackedLineChart();
// creates the dataset
StackedLineDataset dataset = chart.newDataset();
// sets the option
dataset.setBackgroundColor(HtmlColor.RED);
...
// creates the dataset
StackedLineDataset datasetNew = new StackedLineDataset();
// sets the option
datasetNew.setBackgroundColor(HtmlColor.RED);
...
// sets the datasets to the chart
chart.getData().setDatasets(dataset, datasetNew);

The following are the attributes that you can set:

NameTypeScriptableDescription
backgroundColorString - IsColor - Pattern - GradientYesThe fill color/pattern under the line.
borderCapStyleCapStyleYesCap style of the line. See MDN.
borderColorString - IsColor - GradientYesThe color of the line.
borderDashint[]YesLength and spacing of dashes. See MDN.
borderDashOffsetdoubleYesOffset for line dashes. See MDN.
borderJoinStyleJoinStyleYesLine joint style. See MDN.
borderWidthintYesThe width of the line in pixels.
cubicInterpolationModeCubicInterpolationModeYesAlgorithm used to interpolate a smooth curve from the discrete data points.
clipboolean - double - Clip-How to clip relative to chart area. Positive value allows overflow, negative value clips that many pixels inside chart area.
fillString - int - boolean - IsFillYesHow to fill the area under the line. See Filling modes.
hoverBackgroundColorString - IsColor - Pattern - GradientYesThe fill color/pattern under the line, when hovered.
hoverBorderCapStyleCapStyleYesCap style of the line, when hovered. See MDN.
hoverBorderColorString - IsColor - GradientYesThe color of the line, when hovered.
hoverBorderDashint[]YesLength and spacing of dashes, when hovered. See MDN.
hoverBorderDashOffsetintYesOffset for line dashes, when hovered. See MDN.
hoverBorderJoinStyleJoinStyleYesLine joint style, when hovered. See MDN.
hoverBorderWidthintYesThe width of the line in pixels, when hovered.
labelString-The label for the dataset which appears in the legend and tooltips.
normalizedboolean-If true, you provide data with indices that are unique, sorted, and consistent across data sets and provide the normalized.
orderint-The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
parsingboolean-If false, the data set parsing is disable. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.
pointBackgroundColorString[] - IsColor[] - Gradient[]YesThe fill color for points.
pointBorderColorString[] - IsColor[] - Gradient[]YesThe border color for points.
pointBorderWidthint[]YesThe width of the point border in pixels.
pointHitRadiusdouble[]YesThe pixel size of the non-displayed point that reacts to mouse events.
pointHoverBackgroundColorString[] - IsColor[] - Gradient[]YesPoint background color when hovered.
pointHoverBorderColorString[] - IsColor[] - Gradient[]YesPoint border color when hovered.
pointHoverBorderWidthint[]YesBorder width of point when hovered.
pointHoverRadiusdouble[]YesThe radius of the point when hovered.
pointRadiusdouble[]YesThe radius of the point shape. If set to 0, the point is not rendered.
pointRotationdouble[]YesThe rotation of the point in degrees.
pointStylePointStyle[] - Img[] - Canvas[]YesStyle of the point.
showLineboolean-If false, the line is not drawn for this dataset.
spanGapsboolean - double-If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.
steppedStepped-If the line is shown as a stepped line.
tensiondouble-Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used.
xAxisIDString-The ID of the x axis to plot this dataset on.
yAxisIDString-The ID of the y axis to plot this dataset on.

General

The general options for a line dataset can control behaviors not related to styling or interactions and they are the following:

NameDefaultsDescription
clipUndefined.DOUBLEHow to clip relative to chart area.
indexAxisIndexAxis.XThe base axis of the dataset.
labelnullThe label for the dataset which appears in the legend and tooltips.
normalizedfalseIf true, you provide data with indices that are unique, sorted, and consistent across data sets and provide the normalized.
order0The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
parsingtrueIf false, the data set parsing is disable. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.
xAxisIDDefaultScaleId.XThe ID of the x axis to plot this dataset on.
yAxisIDDefaultScaleId.YThe ID of the y axis to plot this dataset on.

Point styling

The style of each point of the dataset can be configured by the following properties:

NameDescription
pointBackgroundColorThe fill color for points.
pointBorderColorThe border color for points.
pointBorderWidthThe width of the point border in pixels.
pointHitRadiusThe pixel size of the non-displayed point that reacts to mouse events.
pointRadiusThe radius of the point shape.
pointRotationThe rotation of the point in degrees.
pointStyleStyle of the point.

All above options have got the fallback to the associated Point elements, retrievable by the following statements:

// from chart instance
Point point = chart.getOptions().getElements().getPoint();
// sets options for all line datasets of the chart
point.setRadius(6);
...
// from defaults
Point defaultPoint = Defaults.get().getGlobal().getElements().getPoint();
// sets options for all line datasets of all charts
defaultPoint.setRadius(6);

Line styling

The style of each line of the dataset can be configured by the following properties:

NameDescription
backgroundColorThe fill color under the line.
borderCapStyleCap style of the line.
borderColorThe color of the line.
borderDashLength and spacing of dashes.
borderDashOffsetOffset for line dashes.
borderJoinStyleLine joint style
borderWidthThe width of the line in pixels.
cubicInterpolationModeAlgorithm used to interpolate a smooth curve from the discrete data points.
fillHow to fill the area under the line.
steppedIf the line is shown as a stepped line.
tensionBezier curve tension of the line.

All above options have got the fallback to the associated Line elements, retrievable by the following statements:

// from chart instance
Line line = chart.getOptions().getElements().getLine();
// sets options for all line datasets of the chart
line.setBorderWidth(6);
...
// from defaults
Line defaultLine = Defaults.get().getGlobal().getElements().getLine();
// sets options for all line datasets of all charts
defaultLine.setBorderWidth(6);

Point interactions

The interaction with each point can be controlled with the following properties:

NameDescription
pointHoverBackgroundColorPoint background color when hovered.
pointHoverBorderColorPoint border color when hovered.
pointHoverBorderWidthBorder width of point when hovered.
pointHoverRadiusThe radius of the point when hovered.

All above options have got the fallback to the associated Point elements, retrievable by the following statements:

// from chart instance
Point point = chart.getOptions().getElements().getPoint();
// sets options for all line datasets of the chart
point.setRadius(6);
...
// from defaults
Point defaultPoint = Defaults.get().getGlobal().getElements().getPoint();
// sets options for all line datasets of all charts
defaultPoint.setRadius(6);

Line interactions

The interaction with each line can be controlled with the following properties:

NameDescription
hoverBackgroundColorThe fill color under the line, when hovered.
hoverBorderCapStyleCap style of the line, when hovered.
hoverBorderColorThe color of the line, when hovered.
hoverBorderDashLength and spacing of dashes, when hovered.
hoverBorderDashOffsetOffset for line dashes, when hovered.
hoverBorderJoinStyleLine joint style, when hovered.
hoverBorderWidthThe width of the line in pixels, when hovered.

All above options have got the fallback to the associated Line elements, retrievable by the following statements:

// from chart instance
Line line = chart.getOptions().getElements().getLine();
// sets options for all line datasets of the chart
line.setBorderWidth(6);
...
// from defaults
Line defaultLine = Defaults.get().getGlobal().getElements().getLine();
// sets options for all line datasets of all charts
defaultLine.setBorderWidth(6);

Scriptable

Scriptable options at dataset level accept a callback which is called for each of the underlying data values. See more details in Configuring charts section.

// creates chart
StackedLineChart chart = new StackedLineChart();
// creates dataset
StackedLineDataset dataset = chart.newDataset();
// sets the option by a callback
dataset.setBackgroundColor(new ColorCallback<DatasetContext>(){

@Override
public IsColor invoke(DatasetContext context){
// logic
return color;
}
});

The following options can be set by a callback:

NameCallbackReturned types
backgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
borderCapStyleCapStyleCallback<DatasetContext>CapStyle
borderColorColorCallback<DatasetContext>String - IsColor - Gradient
borderDashBorderDashCallback<DatasetContext>List<Integer>
borderDashOffsetBorderDashOffsetCallback<DatasetContext>double
borderJoinStyleJoinStyleCallback<DatasetContext>JoinStyle
borderWidthWidthCallback<DatasetContext>int
cubicInterpolationModeCubicInterpolationModeCallbackCubicInterpolationMode
fillFillCallbackString - int - boolean - IsFill
hoverBackgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
hoverBorderCapStyleCapStyleCallback<DatasetContext>CapStyle
hoverBorderColorColorCallback<DatasetContext>String - IsColor - Gradient
hoverBorderDashBorderDashCallback<DatasetContext>List<Integer>
hoverBorderDashOffsetBorderDashOffsetCallback<DatasetContext>int
hoverBorderJoinStyleJoinStyleCallback<DatasetContext>JoinStyle
hoverBorderWidthWidthCallback<DatasetContext>int
pointBackgroundColorColorCallback<DatasetContext>String - IsColor - Gradient
pointBorderColorColorCallback<DatasetContext>String - IsColor - Gradient
pointBorderWidthWidthCallback<DatasetContext>int
pointHitRadiusRadiusCallback<DatasetContext>double
pointHoverBackgroundColorColorCallback<DatasetContext>String - IsColor - Gradient
pointHoverBorderColorColorCallback<DatasetContext>String - IsColor - Gradient
pointHoverBorderWidthWidthCallback<DatasetContext>int
pointHoverRadiusRadiusCallback<DatasetContext>double
pointRadiusRadiusCallback<DatasetContext>double
pointRotationRotationCallback<DatasetContext>double
pointStylePointStyleCallback<DatasetContext>PointStyle - Img - Canvas

Data structure

The data of a dataset for a stacked line chart are passed by an array or list of doubles and the x axis is generally a category. When a stacked line chart is created with a category axis, the labels property of the data object must be specified.

// sets data as an array of doubles
dataset.setData(1,2,3,4,6);

// sets data as a list of double
List<Double> list = new LinkedList<>();
list.add(1);
list.add(2);
list.add(3);
dataset.setData(list);

Options

The stacked line chart specific options implementation to be configured. These options are merged with the global chart configuration options to form the options passed to the chart.

// creates chart
StackedLineChart chart = new StackedLineChart();
// gets the chart options
StackedLineOptions options = chart.getOptions();
// sets option
options.setResponsive(true);

Axes

The chart is creating the default axes out-of-the-box, setting them as scaled. It defines a category axis for index, and a linear axis for values.

You can anyway override them setting your axes.

To access to predefined axes as following:

// gets category axis
CartesianCategoryAxis axis1 = (CartesianCategoryAxis) chart.getOptions().getScales().getAxisById(DefaultScaleId.X);
// sets axis options
axis1.setDisplay(true);
axis1.getTitle().setDisplay(true);
axis1.getTitle().setText("Index");
// gets linear axis
CartesianLinearAxis axis2 = (CartesianLinearAxis) chart.getOptions().getScales().getAxisById(DefaultScaleId.Y);
// sets axis options
axis2.setDisplay(true);
axis2.getTitle().setDisplay(true);
axis2.getTitle().setText("Value");

Vertical line

A stacked vertical line chart enables to have stacked data represented by vertical lines.

Programmatically, you could use a stacked vertical line chart as following:

// creates the chart    
StackedVerticalLineChart chart = new StackedVerticalLineChart();
// adds to DOM
component.add(chart);
...
// example for Elemental2
// gets the chart instance as DOM element
Element element = chart.getChartElement().as();
// adds to DOM
DomGlobal.document.body.appendChild(element);

By UIBinder (ONLY for GWT), you could use a line chart as following:

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:c="urn:import:org.pepstock.charba.client.gwt.widgets">

<g:HTMLPanel width="100%">
....
<c:StackedVerticalLineChartWidget ui:field="chart"/>
...
</g:HTMLPanel>
</ui:UiBinder>

The stacked vertical line chart allows a number of properties to be specified for each stacked vertical line dataset. These are used to set display properties for a specific dataset.

The properties are the same of the stacked line dataset.

Axes

The chart is creating the default axes out-of-the-box, setting them as scaled. It defines a category axis for index, and a linear axis for values.

You can anyway override them setting your axes.

To access to predefined axes as following:

// gets category axis as Y
CartesianCategoryAxis axis1 = (CartesianCategoryAxis) chart.getOptions().getScales().getAxisById(DefaultScaleId.Y);
// sets axis options
axis1.setDisplay(true);
axis1.getTitle().setDisplay(true);
axis1.getTitle().setText("Index");
// gets linear axis as X
CartesianLinearAxis axis2 = (CartesianLinearAxis) chart.getOptions().getScales().getAxisById(DefaultScaleId.X);
// sets axis options
axis2.setDisplay(true);
axis2.getTitle().setDisplay(true);
axis2.getTitle().setText("Value");