Skip to main content
Version: 5.7

Stacked Bar chart

Stacked bar charts can be configured like bar charts and changes the settings on the X and Y axes to enable stacking. Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.

Programmatically, you could use a bar chart as following:

// creates the chart    
StackedBarChart chart = new StackedBarChart();
// 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 bar 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:StackedBarChartWidget ui:field="chart"/>
...
</g:HTMLPanel>
</ui:UiBinder>

Dataset

The stacked bar chart allows a number of properties to be specified for each stacked bar 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
StackedBarChart chart = new StackedBarChart();
// creates the dataset
StackedBarDataset dataset = chart.newDataset();
// sets the option
dataset.setBackgroundColor(HtmlColor.RED);
...
// creates the dataset
StackedBarDataset datasetNew = new StackedBarDataset();
// 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
basedouble - double[]YesBase value for the bar in data units along the value axis.
backgroundColorString[] - IsColor[] - Pattern[] - Gradient[]YesThe fill color/pattern of the bar.
barPercentagedouble-The percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other.
barThicknessint-The width of each bar in pixels.
borderColorString[] - IsColor[] - Gradient[]YesThe color of the bar border.
borderSkippedboolean - BorderSkippedYesWhich edge to skip drawing the border for.
borderRadiusint[] - BarBorderRadius[]YesThe bar border radius (in pixels).
borderWidthint[] - BarBorderWidth[]YesThe stroke width of the bar in pixels.
categoryPercentagedouble-The percent (0-1) of the available width each category should be within the sample width.
clipboolean - double - Clip-How to clip relative to chart area. Positive value allows overflow, negative value clips that many pixels inside chart area. When set to 0 means clip at chart area.
enableBorderRadiusboolean-If true, it only shows the border radius of a bar when the bar is at the end of the stack.
groupedboolean-Should the bars be grouped on index axis.
When true, all the datasets at same index value will be placed next to each other centering on that index value.
When false, each bar is placed on its actual index-axis value.
hoverBackgroundColorString[] - IsColor[] - Pattern[] - Gradient[]YesThe fill color/pattern of the bars when hovered.
hoverBorderColorString[] - IsColor[] - Gradient[]YesThe stroke color of the bars when hovered.
hoverBorderWidthint[]YesThe stroke width of the bars when hovered.
hoverBorderRadiusint[] - BarBorderRadius[]YesThe bar border radius (in pixels) when hovered.
labelString-The label for the dataset which appears in the legend and tooltips.
maxBarThicknessint-The maximum bar thickness, to ensure that bars are not sized thicker than this.
minBarLengthint-Set this to ensure that bars have a minimum length in pixels.
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.
pointStylePointStyle - Img - CanvasYesPoint style for legend.
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 stacked bar 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, tooltips, 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.

Styling

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

NameDescription
backgroundColorThe fill color of the bar.
baseBase value for the bar in data units along the value axis.
borderColorThe color of the bar border.
borderSkippedWhich edge to skip drawing the border for.
borderRadiusThe bar border radius (in pixels).
borderWidthThe stroke width of the bar in pixels.
enableBorderRadiusIf true, it only shows the border radius of a bar when the bar is at the end of the stack.
pointStylePoint style for legend.

All above options have got the fallback to the associated Bar element, retrievable by the following statements:

// from chart instance
Bar bar = chart.getOptions().getElements().getBar();
// sets options for all bar datasets of the chart
bar.setBorderRadius(6);
...
// from defaults
Bar defaultBar = Defaults.get().getGlobal().getElements().getBar();
// sets options for all bar datasets of all charts
defaultBar.setBorderRadius(6);

Interactions

The interactions can change the styling of each bar of the dataset which can set by the following properties:

NameDescription
hoverBackgroundColorThe fill color of the bars when hovered.
hoverBorderColorThe stroke color of the bars when hovered.
hoverBorderRadiusThe bar border radius (in pixels) when hovered.
hoverBorderWidthThe stroke width of the bars when hovered.

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

// from chart instance
Bar bar = chart.getOptions().getElements().getBar();
// sets options for all bar datasets of the chart
bar.setHoverBorderRadius(6);
...
// from defaults
Bar defaultBar = Defaults.get().getGlobal().getElements().getBar();
// sets options for all bar datasets of all charts
defaultBar.setHoverBorderRadius(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
BarChart chart = new BarChart();
// creates dataset
BarDataset 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
baseBaseCallbackdouble
backgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
borderColorColorCallback<DatasetContext>String - IsColor - Gradient
borderSkippedBorderSkippedCallbackBorderSkipped
borderRadiusBorderRadiusCallback<DatasetContext>int - BarBorderRadius
borderWidthBarBorderWidthCallbackint - BarBorderWidth
hoverBackgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
hoverBorderColorColorCallback<DatasetContext>String - IsColor - Gradient
hoverBorderWidthBarBorderWidthCallbackint - BarBorderWidth
hoverBorderRadiusBorderRadiusCallback<DatasetContext>int - BarBorderRadius
pointStylePointStyleCallback<DatasetContext>PointStyle - Img - Canvas

Data structure

When the data is an array or list of doubles, the x axis is generally a category. The points are placed onto the axis using their position in the array. When a stacked bar 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);

Floating bars

You can also specify the dataset for a bar chart as list of floating bar data or by an array of arrays of doubles. This will force rendering of bars with the start and the end point of a bar respectively.

...
// set in the constructor
FloatingData fd1 = new FloatingData(10, 30);
// set by method to update values
FloatingData fd2 = new FloatingData();
fd2.setValues(-10, 60)
// stores the data to dataset
dataset.setFloatingData(fd1, fd2);

Options

The stacked bar 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.

To set the options at chart level, you can get a typed object accordingly with the chart type.

// creates the chart
StackedBarChart chart = new StackedBarChart();
// gets the chart options
StackedBarOptions options = chart.getOptions();
// sets options
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");

Horizontal bar

A stacked horizontal bar chart enables to have stacked data represented by horizontal bars.

Programmatically, you could use a stacked horizontal bar chart as following:

// creates the chart    
StackedHorizontalBarChart chart = new StackedHorizontalBarChart();
// 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:StackedHorizontalBarChartWidget ui:field="chart"/>
...
</g:HTMLPanel>
</ui:UiBinder>

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

The properties are the same of the stacked bar 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");