About

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.

Chart

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'.

Data

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:

                
                    chart.data = [dsA, dsB];
                
            

Layout

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.

Plot

A call to the plot function draws the whole chart.

                
                    chart.plot();
                
            

Examples

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