Synopsis

In this example, we plot student grades in 4 different subjects. Grades are expressed out of 20.

            
                    const maths = [15, 18.5, 13, 14, 17];
                    const english = [16, 7, 15, 16, 17];
                    const geography = [12.5, 11, 18, 10, 14];
                    const physics = [14.5, 17, 14.5, 12, 15];
                    const students = ['Ann', 'Diego', 'Sula', 'Marie', 'Fred'];
                
            

Chart

The chart's context is a div element named 'chart'. Set the size as you want.

            
                    <div id="chart">

                    </div>
                
            

We create a bar chart and give it a title. We also place a legend at the top of the chart.

            
                    const context = document.getElementById('chart');
                    const chart = new BarChart(context);
                    chart.layout.title = {
                        text: 'Student Grades',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold',
                            fontFamily: 'cursive, serif'
                        }
                    };
                    chart.layout.legend = {
                        position: 'north',
                        textStyle: {
                            fontFamily: 'cursive, serif',
                            fontSize: 12
                        }
                    };
                
            

Data

We set the chart's data with four data series.

            
                    chart.data = [
                        {
                            name: 'Maths',
                            data: maths,
                            style: {
                                fill: 'gray'
                            }
                        }
                        ,
                        {
                            name: 'English',
                            data: english,
                            style: {
                                stroke: 'green',
                                fill: 'lightgreen'
                            }
                        }
                        ,
                        {
                            name: 'Geography',
                            data: geography,
                            style: {
                                stroke: 'blue',
                                fill: 'lightblue'
                            }
                        }
                        ,
                        {
                            name: 'Physics',
                            data: physics,
                            style: {
                                stroke: 'red',
                                fill: 'orangered'
                            }
                        }
                    ];
                
            

Customize

The X-axis displays student names. The Y-axis displays student grades and is given a title. Axis lines are hidden. Tick placement is automated on both axes.

            
                    chart.layout.xAxis = {
                        visible: false,
                        tick: {
                            text: (d) => students[d],
                            style: {
                                fontSize: 14,
                                fontWeight: 'bold'
                            }
                        }
                    };
                    chart.layout.yAxis = {
                        visible: false,
                        title: {
                            text: 'Grade (Out of 20)',
                            style: {
                                fontSize: 12,
                                fontFamily: 'cursive, serif'
                            }
                        }
                    };
                
            

Plot

We finally call the plot function to display the data.

            
                    chart.plot();
                
            

Putting it together

HTML

            
                    <div id="chart">

                    </div>
                
            

JavaScript

            
                    const maths = [15, 18.5, 13, 14, 17];
                    const english = [16, 7, 15, 16, 17];
                    const geography = [12.5, 11, 18, 10, 14];
                    const physics = [14.5, 17, 14.5, 12, 15];
                    const students = ['Ann', 'Diego', 'Sula', 'Marie', 'Fred'];

                    const context = document.getElementById('chart');
                    const chart = new BarChart(context);
                    chart.layout.title = {
                        text: 'Student Grades',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold',
                            fontFamily: 'cursive, serif'
                        }
                    };
                    chart.layout.legend = {
                        position: 'north',
                        textStyle: {
                            fontFamily: 'cursive, serif',
                            fontSize: 12
                        }
                    };

                    chart.data = [
                        {
                            name: 'Maths',
                            data: maths,
                            style: {
                                fill: 'gray'
                            }
                        }
                        ,
                        {
                            name: 'English',
                            data: english,
                            style: {
                                stroke: 'green',
                                fill: 'lightgreen'
                            }
                        }
                        ,
                        {
                            name: 'Geography',
                            data: geography,
                            style: {
                                stroke: 'blue',
                                fill: 'lightblue'
                            }
                        }
                        ,
                        {
                            name: 'Physics',
                            data: physics,
                            style: {
                                stroke: 'red',
                                fill: 'orangered'
                            }
                        }
                    ];

                    chart.layout.xAxis = {
                        visible: false,
                        tick: {
                            text: (d) => students[d],
                            style: {
                                fontSize: 14,
                                fontWeight: 'bold'
                            }
                        }
                    };
                    chart.layout.yAxis = {
                        visible: false,
                        title: {
                            text: 'Grade (Out of 20)',
                            style: {
                                fontSize: 12,
                                fontFamily: 'cursive, serif'
                            }
                        }
                    };

                    chart.plot();