Bar Chart


A bar chart uses vertical bars to represent one ore more sets of data. The data sets are defined as arrays of data values with the same size.

                    let dataA = [5, 10, 8, 16, 14.5, 18, 22, 17.5, 13, 12.5];
                    let dataB = [8, 6, 14, 12.5, 22, 15, 17.3, 20, 24, 19];

Data Series

A DataSeries object wraps each data set and defines the shape and style of the vertical bars representing the data values. It exposes the following properties:

Property Definition Type Default
name Data series name. Will be used in chart's legend. String ''
style Bar style RectStyle { stroke: 'black', strokeWidth: 1, strokeDashArray: 'none', fill: 'none', cornerRadius: 0 }
data Array of data values Array [ ]
                let dsA = {
                    name: 'Series A',
                    data: dataA,
                    style: {
                        stroke: 'red',
                        strokeWidth: 1,
                        fill: 'lightcoral',
                        cornerRadius: 5

                let dsB = {
                    name: 'Series B',
                    data: dataB,
                    style: {
                        stroke: 'blue',
                        strokeWidth: 1,
                        fill: 'lightblue',
                        strokeDashArray: '2 2'

When omitted, the name is set to 'Series n'. Where n is the order of appearance of the data series in the chart's data collection.


Use the chart's context to instantiate a BarChart object as follows:

                    let context = document.getElementById('chart');
                    let chart = new BarChart(context);

Background Color

The chart has a transparent background by default. As illustrated in the following examples, the background color can be set with a color name, a hexadecimal value or an RGB value.

                    //gray color
                    chart.backgroundColor = 'gray';
                    //hexadecimal value
                    chart.backgroundColor = '#464849';
                    //RGB value
                    chart.backgroundColor = 'rgb(13,46,64)';

Highlight Color

When you hover on the chart, the bar that's currently focused gets highlighted. Its background color changes and takes the value of the chart's highlightColor property. When the bar loses focus, its initial background color is reinstated. The highlightColor can be set with a color value. It defaults to 'transparent'.


The chart's data stores an array of data series. Given the two data series created above, the chart's data is set as follows:

           = [dsA, dsB];


The layout comprises of two vertical and horizontal axes, a title and a legend. For readability's sake, the bar chart's legend is left outside of the chart area. Its positioning options stay standard. When created, the chart uses default layout settings. You can customize the different layout components to change its look and feel.


A call to the plot function draws the whole chart.



The Examples section provides a step-by-step guide to building bar charts with detailed code snippets.