JavaScript ChartsHistogram Series

A Histogram Series shows the frequency distribution of data values, providing a visual representation of the distribution and spread of the data.

Simple Histogram

To create a Histogram Series, use the histogram series type and provide an xKey.

series: [
    {
        type: 'histogram',
        xKey: 'age',
        xName: 'Participant Age',
    },
],

In this configuration:

• xKey defines the data values to be distributed into bins.
• The Histogram Series will split the data into around ten identically sized bins, although the exact number will vary to show round values for the bin boundaries.
• xName configures display names, reflected in the Tooltip Titles.

Bin Customisation

Bin Count

The approximate number of bins to aim for can be overridden by setting the binCount property.

series: [{
    type: 'histogram'
    xKey: 'age',
    binCount: 20,
}]

Irregular Intervals

Rather than specifying the number of bins, it is possible to explicitly give the start and end values for each bin.

series: [{
    type: 'histogram'
    xKey: 'age',
    areaPlot: true,
    bins: [[16, 18], [18, 21], [21, 25], [25, 40]],
}]

In this configuration:

• The data from the race is split into irregular age categories using the bins.
• This property takes an array of arrays where each inner array contains the start and end value of a bin.
• The areaPlot property has been set to true. This visualises the value using the area of the bar rather than its height and is often used for Histogram Series with irregular bin sizes.

2D Histogram

To provide Y values as well as X values, specify both xKey and yKey properties.

series: [
    {
        type: 'histogram',
        xKey: 'age',
        xName: "Participant Age",
        yKey: 'winnings',
        yName: 'Winnings',
    },
],

• xKey defines the data values to be distributed into bins along the horizontal axis.
• yKey defines the values determining the height of each bar along the vertical axis. These are aggregated within each bin.
• xName and yName configure display names, reflected in the Tooltips.

Aggregation

The default aggregation method is sum. Use the aggregation option to change this to count or mean.

series: [
    {
        type: 'histogram',
        xKey: 'age',
        xName: 'Participant Age',
        yKey: 'winnings',
        yName: 'Winnings',
        aggregation: 'sum' //default
    },
],

API Reference