Synopsis

In this example, we show the age distribution of a judo club's members. We create 7 age-ranges and count the population in each.

            
                    const population = [7, 13, 9, 22, 16, 10, 14];
                    const ageRanges = ['5 - 10', '11 - 15', '16 - 20', '21 - 25', '26 - 30', '31 - 35', '35 +'];
                
            

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, give it a title and set its background color.

            
                    const context = document.getElementById('chart');
                    const chart = new BarChart(context);
                    chart.backgroundColor = 'darkgray';
                    chart.highlightColor = 'white';
                    chart.layout.title = {
                        text: 'Age Distribution',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold',
                            fontFamily: 'math'
                        }
                    };
                
            

Data

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

            
                    chart.data = [
                        {
                            name: 'Judo Club',
                            data: population,
                            style: {
                                stroke: 'black',
                                strokeWidth: 1,
                                fill: 'lightgray'
                            }
                        }
                    ];
                
            

Customize

The X-axis displays age-ranges. The Y-axis shows the population in each range. Both axes have a title. On the horizontal axis, we show the axis line along with all 7 ticks. The axis line is hidden on the vertical axis and tick placement is automated.

            
                    chart.layout.xAxis = {
                        title: {
                            text: 'Age Range'
                        },
                        tick: {
                            placement: 'custom',
                            nbTicks: 7,
                            text: (d) => ageRanges[d]
                        }
                    };
                    chart.layout.yAxis = {
                        visible: false,
                        title: {
                            text: 'Population'
                        },
                        tick: {
                            text: (d) => d.toFixed(0)
                        }
                    };
                
            

Plot

We finally call the plot function to display the data.

            
                    chart.plot();
                
            

Putting it together

HTML

            
                    <div id="chart">

                    </div>
                
            

JavaScript

            
                    const population = [7, 13, 9, 22, 16, 10, 14];
                    const ageRanges = ['5 - 10', '11 - 15', '16 - 20', '21 - 25', '26 - 30', '31 - 35', '35 +'];

                    const context = document.getElementById('chart');
                    const chart = new BarChart(context);
                    chart.backgroundColor = 'darkgray';
                    chart.highlightColor = 'white';
                    chart.layout.title = {
                        text: 'Age Distribution',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold',
                            fontFamily: 'math'
                        }
                    };

                    chart.data = [
                        {
                            name: 'Judo Club',
                            data: population,
                            style: {
                                stroke: 'black',
                                strokeWidth: 1,
                                fill: 'lightgray'
                            }
                        }
                    ];

                    chart.layout.xAxis = {
                        title: {
                            text: 'Age Range'
                        },
                        tick: {
                            placement: 'custom',
                            nbTicks: 7,
                            text: (d) => ageRanges[d]
                        }
                    };
                    chart.layout.yAxis = {
                        visible: false,
                        title: {
                            text: 'Population'
                        },
                        tick: {
                            text: (d) => d.toFixed(0)
                        }
                    };

                    chart.plot();