A Histogram Series shows the frequency distribution of data values, providing a visual representation of the distribution and spread of the data.
Simple Histogram Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
HistogramSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
HistogramSeriesModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
title: {
text: "Race demographics",
},
data: getData(),
series: [
{
type: "histogram",
xKey: "age",
xName: "Participant Age",
},
],
axes: {
x: {
type: "number",
title: { text: "Age band (years)" },
interval: { step: 2 },
},
y: {
type: "number",
title: { text: "Number of participants" },
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData(): any[] {
return [
{
age: 20,
},
{
age: 25,
},
{
age: 19,
},
{
age: 28,
},
{
age: 31,
},
{
age: 24,
},
{
age: 21,
},
{
age: 21,
},
{
age: 22,
},
{
age: 27,
},
{
age: 25,
},
{
age: 25,
},
{
age: 24,
},
{
age: 21,
},
{
age: 19,
},
{
age: 25,
},
{
age: 27,
},
{
age: 22,
},
{
age: 26,
},
{
age: 20,
},
{
age: 21,
},
{
age: 33,
},
{
age: 27,
},
{
age: 23,
},
{
age: 29,
},
{
age: 24,
},
{
age: 23,
},
{
age: 20,
},
{
age: 25,
},
{
age: 22,
},
{
age: 21,
},
{
age: 22,
},
{
age: 29,
},
{
age: 27,
},
{
age: 24,
},
{
age: 26,
},
{
age: 21,
},
{
age: 25,
},
{
age: 22,
},
{
age: 24,
},
{
age: 24,
},
{
age: 22,
},
{
age: 26,
},
{
age: 23,
},
{
age: 28,
},
{
age: 24,
},
{
age: 28,
},
{
age: 19,
},
{
age: 23,
},
{
age: 27,
},
{
age: 24,
},
{
age: 26,
},
{
age: 27,
},
{
age: 20,
},
{
age: 24,
},
{
age: 20,
},
{
age: 26,
},
{
age: 29,
},
{
age: 24,
},
{
age: 24,
},
{
age: 23,
},
{
age: 23,
},
{
age: 29,
},
{
age: 27,
},
{
age: 22,
},
{
age: 28,
},
{
age: 25,
},
{
age: 25,
},
{
age: 24,
},
{
age: 29,
},
{
age: 22,
},
{
age: 27,
},
{
age: 21,
},
{
age: 23,
},
{
age: 25,
},
{
age: 25,
},
{
age: 25,
},
{
age: 23,
},
{
age: 23,
},
{
age: 18,
},
{
age: 20,
},
{
age: 25,
},
{
age: 20,
},
{
age: 24,
},
{
age: 20,
},
{
age: 21,
},
{
age: 28,
},
{
age: 20,
},
{
age: 26,
},
{
age: 27,
},
{
age: 24,
},
{
age: 21,
},
{
age: 29,
},
{
age: 28,
},
{
age: 18,
},
{
age: 25,
},
{
age: 24,
},
{
age: 27,
},
{
age: 21,
},
{
age: 24,
},
{
age: 27,
},
{
age: 26,
},
{
age: 26,
},
{
age: 21,
},
{
age: 30,
},
{
age: 19,
},
{
age: 22,
},
{
age: 23,
},
{
age: 28,
},
{
age: 24,
},
{
age: 24,
},
{
age: 24,
},
{
age: 30,
},
{
age: 23,
},
{
age: 22,
},
{
age: 26,
},
{
age: 28,
},
{
age: 25,
},
{
age: 25,
},
{
age: 25,
},
{
age: 24,
},
{
age: 23,
},
{
age: 21,
},
{
age: 22,
},
{
age: 25,
},
{
age: 22,
},
{
age: 22,
},
{
age: 23,
},
{
age: 23,
},
{
age: 24,
},
{
age: 24,
},
{
age: 22,
},
{
age: 23,
},
{
age: 28,
},
{
age: 27,
},
{
age: 24,
},
{
age: 22,
},
{
age: 26,
},
{
age: 25,
},
{
age: 25,
},
{
age: 24,
},
{
age: 22,
},
{
age: 22,
},
{
age: 27,
},
{
age: 25,
},
{
age: 24,
},
{
age: 18,
},
{
age: 31,
},
{
age: 23,
},
{
age: 25,
},
{
age: 29,
},
{
age: 23,
},
{
age: 23,
},
{
age: 28,
},
{
age: 21,
},
{
age: 23,
},
{
age: 24,
},
{
age: 23,
},
{
age: 23,
},
{
age: 25,
},
{
age: 29,
},
{
age: 25,
},
{
age: 20,
},
{
age: 17,
},
{
age: 27,
},
{
age: 24,
},
{
age: 23,
},
{
age: 22,
},
{
age: 21,
},
{
age: 22,
},
{
age: 27,
},
{
age: 26,
},
{
age: 25,
},
{
age: 24,
},
{
age: 21,
},
{
age: 30,
},
{
age: 26,
},
{
age: 20,
},
{
age: 25,
},
{
age: 25,
},
{
age: 18,
},
{
age: 23,
},
{
age: 27,
},
{
age: 26,
},
{
age: 21,
},
{
age: 25,
},
{
age: 23,
},
{
age: 32,
},
{
age: 19,
},
{
age: 25,
},
{
age: 20,
},
{
age: 25,
},
{
age: 29,
},
{
age: 25,
},
{
age: 25,
},
{
age: 26,
},
{
age: 24,
},
{
age: 28,
},
{
age: 27,
},
{
age: 22,
},
];
}
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:
xKeydefines 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.
xNameconfigures display names, reflected in the Tooltip Titles.
Bin Customisation Copy Link
Bin Count Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
HistogramSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
HistogramSeriesModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
title: {
text: "Race demographics",
},
subtitle: {
text: "Number of participants by age",
},
data: getData(),
series: [
{
type: "histogram",
xKey: "age",
xName: "Participant Age",
binCount: 20,
},
],
axes: {
x: {
type: "number",
title: { text: "Age (years)" },
},
y: {
type: "number",
title: { text: "Number of participants" },
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData(): any[] {
return [
{
age: 20,
},
{
age: 25,
},
{
age: 19,
},
{
age: 28,
},
{
age: 31,
},
{
age: 24,
},
{
age: 21,
},
{
age: 21,
},
{
age: 22,
},
{
age: 27,
},
{
age: 25,
},
{
age: 25,
},
{
age: 24,
},
{
age: 21,
},
{
age: 19,
},
{
age: 25,
},
{
age: 27,
},
{
age: 22,
},
{
age: 26,
},
{
age: 20,
},
{
age: 21,
},
{
age: 33,
},
{
age: 27,
},
{
age: 23,
},
{
age: 29,
},
{
age: 24,
},
{
age: 23,
},
{
age: 20,
},
{
age: 25,
},
{
age: 22,
},
{
age: 21,
},
{
age: 22,
},
{
age: 29,
},
{
age: 27,
},
{
age: 24,
},
{
age: 26,
},
{
age: 21,
},
{
age: 25,
},
{
age: 22,
},
{
age: 24,
},
{
age: 24,
},
{
age: 22,
},
{
age: 26,
},
{
age: 23,
},
{
age: 28,
},
{
age: 24,
},
{
age: 28,
},
{
age: 19,
},
{
age: 23,
},
{
age: 27,
},
{
age: 24,
},
{
age: 26,
},
{
age: 27,
},
{
age: 20,
},
{
age: 24,
},
{
age: 20,
},
{
age: 26,
},
{
age: 29,
},
{
age: 24,
},
{
age: 24,
},
{
age: 23,
},
{
age: 23,
},
{
age: 29,
},
{
age: 27,
},
{
age: 22,
},
{
age: 28,
},
{
age: 25,
},
{
age: 25,
},
{
age: 24,
},
{
age: 29,
},
{
age: 22,
},
{
age: 27,
},
{
age: 21,
},
{
age: 23,
},
{
age: 25,
},
{
age: 25,
},
{
age: 25,
},
{
age: 23,
},
{
age: 23,
},
{
age: 18,
},
{
age: 20,
},
{
age: 25,
},
{
age: 20,
},
{
age: 24,
},
{
age: 20,
},
{
age: 21,
},
{
age: 28,
},
{
age: 20,
},
{
age: 26,
},
{
age: 27,
},
{
age: 24,
},
{
age: 21,
},
{
age: 29,
},
{
age: 28,
},
{
age: 18,
},
{
age: 25,
},
{
age: 24,
},
{
age: 27,
},
{
age: 21,
},
{
age: 24,
},
{
age: 27,
},
{
age: 26,
},
{
age: 26,
},
{
age: 21,
},
{
age: 30,
},
{
age: 19,
},
{
age: 22,
},
{
age: 23,
},
{
age: 28,
},
{
age: 24,
},
{
age: 24,
},
{
age: 24,
},
{
age: 30,
},
{
age: 23,
},
{
age: 22,
},
{
age: 26,
},
{
age: 28,
},
{
age: 25,
},
{
age: 25,
},
{
age: 25,
},
{
age: 24,
},
{
age: 23,
},
{
age: 21,
},
{
age: 22,
},
{
age: 25,
},
{
age: 22,
},
{
age: 22,
},
{
age: 23,
},
{
age: 23,
},
{
age: 24,
},
{
age: 24,
},
{
age: 22,
},
{
age: 23,
},
{
age: 28,
},
{
age: 27,
},
{
age: 24,
},
{
age: 22,
},
{
age: 26,
},
{
age: 25,
},
{
age: 25,
},
{
age: 24,
},
{
age: 22,
},
{
age: 22,
},
{
age: 27,
},
{
age: 25,
},
{
age: 24,
},
{
age: 18,
},
{
age: 31,
},
{
age: 23,
},
{
age: 25,
},
{
age: 29,
},
{
age: 23,
},
{
age: 23,
},
{
age: 28,
},
{
age: 21,
},
{
age: 23,
},
{
age: 24,
},
{
age: 23,
},
{
age: 23,
},
{
age: 25,
},
{
age: 29,
},
{
age: 25,
},
{
age: 20,
},
{
age: 17,
},
{
age: 27,
},
{
age: 24,
},
{
age: 23,
},
{
age: 22,
},
{
age: 21,
},
{
age: 22,
},
{
age: 27,
},
{
age: 26,
},
{
age: 25,
},
{
age: 24,
},
{
age: 21,
},
{
age: 30,
},
{
age: 26,
},
{
age: 20,
},
{
age: 25,
},
{
age: 25,
},
{
age: 18,
},
{
age: 23,
},
{
age: 27,
},
{
age: 26,
},
{
age: 21,
},
{
age: 25,
},
{
age: 23,
},
{
age: 32,
},
{
age: 19,
},
{
age: 25,
},
{
age: 20,
},
{
age: 25,
},
{
age: 29,
},
{
age: 25,
},
{
age: 25,
},
{
age: 26,
},
{
age: 24,
},
{
age: 28,
},
{
age: 27,
},
{
age: 22,
},
];
}
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 Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
HistogramSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
HistogramSeriesModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
title: {
text: "Race demographics",
},
subtitle: {
text: "Number of participants by age category",
},
data: getData(),
series: [
{
type: "histogram",
xKey: "age",
xName: "Participant Age",
areaPlot: true,
bins: [
[16, 18],
[18, 21],
[21, 25],
[25, 40],
],
},
],
axes: {
x: {
type: "number",
title: { text: "Age category (years)" },
interval: { step: 2 },
},
y: {
type: "number",
title: { text: "Number of participants" },
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData(): any[] {
return [
{
age: 20,
time: 131.2,
winnings: 207.06,
},
{
age: 25,
time: 115.4,
winnings: 184.69,
},
{
age: 19,
time: 165.1,
winnings: 95.55,
},
{
age: 28,
time: 182.9,
winnings: 160.22,
},
{
age: 31,
time: 338.7,
winnings: 198.3,
},
{
age: 24,
time: 111.4,
winnings: 288.47,
},
{
age: 21,
time: 165.5,
winnings: 224.69,
},
{
age: 21,
time: 46.8,
winnings: 273.39,
},
{
age: 22,
time: 225.4,
winnings: 259.15,
},
{
age: 27,
time: 227.7,
winnings: 223.65,
},
{
age: 25,
time: 227.4,
winnings: 147.61,
},
{
age: 25,
time: 180.1,
winnings: 242.42,
},
{
age: 24,
time: 57,
winnings: 227.12,
},
{
age: 21,
time: 110.9,
winnings: 204.54,
},
{
age: 19,
time: 67.7,
winnings: 244.73,
},
{
age: 25,
time: 81.8,
winnings: 219.05,
},
{
age: 27,
time: 138.2,
winnings: 193.13,
},
{
age: 22,
time: 59.7,
winnings: 211.1,
},
{
age: 26,
time: 93.2,
winnings: 186.41,
},
{
age: 20,
time: 102.4,
winnings: 145.25,
},
{
age: 21,
time: 114.8,
winnings: 199.6,
},
{
age: 33,
time: 121.5,
winnings: 221.47,
},
{
age: 27,
time: 70.1,
winnings: 242.4,
},
{
age: 23,
time: 61.5,
winnings: 244.42,
},
{
age: 29,
time: 88.3,
winnings: 246.88,
},
{
age: 24,
time: 152.2,
winnings: 157.58,
},
{
age: 23,
time: 145.9,
winnings: 192.58,
},
{
age: 20,
time: 110.8,
winnings: 168.29,
},
{
age: 25,
time: 150.5,
winnings: 168.18,
},
{
age: 22,
time: 199,
winnings: 224.13,
},
{
age: 21,
time: 105.2,
winnings: 150.16,
},
{
age: 22,
time: 38.9,
winnings: 226.71,
},
{
age: 29,
time: 165.6,
winnings: 296.93,
},
{
age: 27,
time: 150.8,
winnings: 140.15,
},
{
age: 24,
time: 42.2,
winnings: 256.41,
},
{
age: 26,
time: -15,
winnings: 201.3,
},
{
age: 21,
time: 136,
winnings: 299.64,
},
{
age: 25,
time: 18.9,
winnings: 190.56,
},
{
age: 22,
time: 123.5,
winnings: 157.54,
},
{
age: 24,
time: 202.6,
winnings: 241.87,
},
{
age: 24,
time: 71.7,
winnings: 188.39,
},
{
age: 22,
time: 131.2,
winnings: 202.82,
},
{
age: 26,
time: 117,
winnings: 190.08,
},
{
age: 23,
time: 119.5,
winnings: 158.08,
},
{
age: 28,
time: 106.9,
winnings: 166.1,
},
{
age: 24,
time: 72,
winnings: 190.54,
},
{
age: 28,
time: 96.3,
winnings: 132.54,
},
{
age: 19,
time: 81.3,
winnings: 164.15,
},
{
age: 23,
time: 17.2,
winnings: 214.74,
},
{
age: 27,
time: 81.3,
winnings: 248.72,
},
{
age: 24,
time: 135.2,
winnings: 215.81,
},
{
age: 26,
time: 53.5,
winnings: 180.84,
},
{
age: 27,
time: 101.5,
winnings: 186.76,
},
{
age: 20,
time: 106.3,
winnings: 142.84,
},
{
age: 24,
time: 101,
winnings: 236.66,
},
{
age: 20,
time: 166.2,
winnings: 209.94,
},
{
age: 26,
time: 127.7,
winnings: 233.19,
},
{
age: 29,
time: 247.6,
winnings: 284.24,
},
{
age: 24,
time: 110.8,
winnings: 154.96,
},
{
age: 24,
time: 83.5,
winnings: 160.91,
},
{
age: 23,
time: 46,
winnings: 201.76,
},
{
age: 23,
time: 20.2,
winnings: 217.38,
},
{
age: 29,
time: 101.6,
winnings: 232.97,
},
{
age: 27,
time: 48.3,
winnings: 305.82,
},
{
age: 22,
time: 147.7,
winnings: 165.49,
},
{
age: 28,
time: 174.9,
winnings: 138.05,
},
{
age: 25,
time: 18.1,
winnings: 205.32,
},
{
age: 25,
time: 61.1,
winnings: 79.94,
},
{
age: 24,
time: 165.7,
winnings: 209.11,
},
{
age: 29,
time: 130.9,
winnings: 173.16,
},
{
age: 22,
time: 116.2,
winnings: 209.45,
},
{
age: 27,
time: 202.4,
winnings: 232.77,
},
{
age: 21,
time: 255.7,
winnings: 191.64,
},
{
age: 23,
time: 75.5,
winnings: 170.23,
},
{
age: 25,
time: 160.8,
winnings: 167.06,
},
{
age: 25,
time: 107,
winnings: 200.18,
},
{
age: 25,
time: 130,
winnings: 122.53,
},
{
age: 23,
time: 259.4,
winnings: 187.28,
},
{
age: 23,
time: 185.1,
winnings: 123.62,
},
{
age: 18,
time: 94.2,
winnings: 236.59,
},
{
age: 20,
time: 145.4,
winnings: 222.47,
},
{
age: 25,
time: 204.9,
winnings: 139.56,
},
{
age: 20,
time: 114.5,
winnings: 252.99,
},
{
age: 24,
time: -18.9,
winnings: 146.93,
},
{
age: 20,
time: 114.3,
winnings: 222.16,
},
{
age: 21,
time: 117.6,
winnings: 182.48,
},
{
age: 28,
time: 268.3,
winnings: 164.17,
},
{
age: 20,
time: 111,
winnings: 217.49,
},
{
age: 26,
time: 158.9,
winnings: 206.93,
},
{
age: 27,
time: 140.4,
winnings: 192.76,
},
{
age: 24,
time: 138.1,
winnings: 226.27,
},
{
age: 21,
time: 186.2,
winnings: 290.81,
},
{
age: 29,
time: 223.8,
winnings: 147.18,
},
{
age: 28,
time: 65.2,
winnings: 201.66,
},
{
age: 18,
time: 77.2,
winnings: 125.35,
},
{
age: 25,
time: 78.7,
winnings: 235.34,
},
{
age: 24,
time: 114.3,
winnings: 210.51,
},
{
age: 27,
time: 151.4,
winnings: 159.82,
},
{
age: 21,
time: 107.5,
winnings: 237.44,
},
{
age: 24,
time: 119.8,
winnings: 220.33,
},
{
age: 27,
time: 19.3,
winnings: 119.13,
},
{
age: 26,
time: 98.5,
winnings: 277.4,
},
{
age: 26,
time: 90.8,
winnings: 205.01,
},
{
age: 21,
time: 123,
winnings: 178.97,
},
{
age: 30,
time: 132.1,
winnings: 164.01,
},
{
age: 19,
time: 41.3,
winnings: 154.34,
},
{
age: 22,
time: 98,
winnings: 98.53,
},
{
age: 23,
time: 218.2,
winnings: 140.92,
},
{
age: 28,
time: 108,
winnings: 231.51,
},
{
age: 24,
time: 132.6,
winnings: 187.52,
},
{
age: 24,
time: 128.7,
winnings: 109.73,
},
{
age: 24,
time: 170.2,
winnings: 224.77,
},
{
age: 30,
time: 144.9,
winnings: 280.26,
},
{
age: 23,
time: 219.8,
winnings: 169.25,
},
{
age: 22,
time: 66.1,
winnings: 203.49,
},
{
age: 26,
time: 258.6,
winnings: 240,
},
{
age: 28,
time: 107.5,
winnings: 203.82,
},
{
age: 25,
time: 98.4,
winnings: 62,
},
{
age: 25,
time: 104,
winnings: 219.36,
},
{
age: 25,
time: 135.5,
winnings: 198.37,
},
{
age: 24,
time: 162.4,
winnings: 121.78,
},
{
age: 23,
time: 104.4,
winnings: 212.79,
},
{
age: 21,
time: 201,
winnings: 192.47,
},
{
age: 22,
time: 124.8,
winnings: 152.12,
},
{
age: 25,
time: 121.8,
winnings: 196.58,
},
{
age: 22,
time: 130.6,
winnings: 182.1,
},
{
age: 22,
time: 136,
winnings: 221.74,
},
{
age: 23,
time: 4.7,
winnings: 193.95,
},
{
age: 23,
time: 109.8,
winnings: 129.27,
},
{
age: 24,
time: -17,
winnings: 264.02,
},
{
age: 24,
time: 145.4,
winnings: 179.41,
},
{
age: 22,
time: 97,
winnings: 272.55,
},
{
age: 23,
time: 160.3,
winnings: 194.45,
},
{
age: 28,
time: 101.9,
winnings: 137.31,
},
{
age: 27,
time: 212.5,
winnings: 216.47,
},
{
age: 24,
time: -13.6,
winnings: 342.52,
},
{
age: 22,
time: 211,
winnings: 206.79,
},
{
age: 26,
time: 87.3,
winnings: 307.71,
},
{
age: 25,
time: 56.1,
winnings: 282.63,
},
{
age: 25,
time: 63.8,
winnings: 251.4,
},
{
age: 24,
time: 137.2,
winnings: 178.45,
},
{
age: 22,
time: 106.2,
winnings: 202.1,
},
{
age: 22,
time: 90.9,
winnings: 199.35,
},
{
age: 27,
time: 61.7,
winnings: 270.86,
},
{
age: 25,
time: 111,
winnings: 133.82,
},
{
age: 24,
time: 136.8,
winnings: 216.06,
},
{
age: 18,
time: 72.1,
winnings: 257.61,
},
{
age: 31,
time: 282.1,
winnings: 125.25,
},
{
age: 23,
time: 149.6,
winnings: 302.27,
},
{
age: 25,
time: 132.2,
winnings: 131.57,
},
{
age: 29,
time: 87,
winnings: 164.22,
},
{
age: 23,
time: 37.8,
winnings: 230.13,
},
{
age: 23,
time: 83.7,
winnings: 286.45,
},
{
age: 28,
time: 240.5,
winnings: 227.03,
},
{
age: 21,
time: 108.5,
winnings: 227.95,
},
{
age: 23,
time: 153.4,
winnings: 291.85,
},
{
age: 24,
time: 100.7,
winnings: 98.78,
},
{
age: 23,
time: 181.9,
winnings: 310.7,
},
{
age: 23,
time: 183.6,
winnings: 255.28,
},
{
age: 25,
time: 230.6,
winnings: 172.52,
},
{
age: 29,
time: 105.8,
winnings: 180.08,
},
{
age: 25,
time: 171.5,
winnings: 213.5,
},
{
age: 20,
time: 186,
winnings: 177.87,
},
{
age: 17,
time: 37.9,
winnings: 150.89,
},
{
age: 27,
time: 35.9,
winnings: 134.55,
},
{
age: 24,
time: 20.1,
winnings: 192.48,
},
{
age: 23,
time: 191.4,
winnings: 172.87,
},
{
age: 22,
time: 132.1,
winnings: 184.28,
},
{
age: 21,
time: 70.8,
winnings: 323.35,
},
{
age: 22,
time: -61.4,
winnings: 162.2,
},
{
age: 27,
time: 119.9,
winnings: 208.78,
},
{
age: 26,
time: 97.9,
winnings: 145.94,
},
{
age: 25,
time: 197.3,
winnings: 165.77,
},
{
age: 24,
time: 258.3,
winnings: 113.82,
},
{
age: 21,
time: 124,
winnings: 239.78,
},
{
age: 30,
time: 110,
winnings: 176.77,
},
{
age: 26,
time: 186.5,
winnings: 202.73,
},
{
age: 20,
time: 167.1,
winnings: 233.23,
},
{
age: 25,
time: 157.9,
winnings: 222.82,
},
{
age: 25,
time: 60.1,
winnings: 167.32,
},
{
age: 18,
time: 87.4,
winnings: 238.64,
},
{
age: 23,
time: 55.9,
winnings: 188.91,
},
{
age: 27,
time: 31.9,
winnings: 235.76,
},
{
age: 26,
time: 176.6,
winnings: 256.51,
},
{
age: 21,
time: 66.5,
winnings: 243.26,
},
{
age: 25,
time: 236.9,
winnings: 171.77,
},
{
age: 23,
time: 194.1,
winnings: 221.2,
},
{
age: 32,
time: 75.8,
winnings: 104.84,
},
{
age: 19,
time: 170.7,
winnings: 179.39,
},
{
age: 25,
time: 140.3,
winnings: 221.66,
},
{
age: 20,
time: 11.4,
winnings: 161.64,
},
{
age: 25,
time: 106.3,
winnings: 273.87,
},
{
age: 29,
time: 120.4,
winnings: 240.72,
},
{
age: 25,
time: 188.2,
winnings: 199,
},
{
age: 25,
time: 203.1,
winnings: 235.22,
},
{
age: 26,
time: 182.4,
winnings: 166.45,
},
{
age: 24,
time: 90.6,
winnings: 176.94,
},
{
age: 28,
time: 115.3,
winnings: 228.3,
},
{
age: 27,
time: 102.3,
winnings: 182.62,
},
{
age: 22,
time: 72.2,
winnings: 245.47,
},
];
}
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
areaPlotproperty has been set totrue. 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.
If both bins and binCount properties are provided, binCount takes precedence.
2D Histogram Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
HistogramSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
HistogramSeriesModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
title: {
text: "Prize money distribution",
},
subtitle: {
text: "Total winnings by participant age",
},
data: getData(),
series: [
{
type: "histogram",
xKey: "age",
xName: "Participant Age",
yKey: "winnings",
yName: "Winnings",
aggregation: "sum",
},
],
axes: {
x: {
type: "number",
title: { text: "Age band (years)" },
interval: { step: 2 },
},
y: {
type: "number",
title: { text: "Total winnings (USD)" },
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData(): any[] {
return [
{
age: 20,
time: 131.2,
winnings: 207.06,
},
{
age: 25,
time: 115.4,
winnings: 184.69,
},
{
age: 19,
time: 165.1,
winnings: 95.55,
},
{
age: 28,
time: 182.9,
winnings: 160.22,
},
{
age: 31,
time: 338.7,
winnings: 198.3,
},
{
age: 24,
time: 111.4,
winnings: 288.47,
},
{
age: 21,
time: 165.5,
winnings: 224.69,
},
{
age: 21,
time: 46.8,
winnings: 273.39,
},
{
age: 22,
time: 225.4,
winnings: 259.15,
},
{
age: 27,
time: 227.7,
winnings: 223.65,
},
{
age: 25,
time: 227.4,
winnings: 147.61,
},
{
age: 25,
time: 180.1,
winnings: 242.42,
},
{
age: 24,
time: 57,
winnings: 227.12,
},
{
age: 21,
time: 110.9,
winnings: 204.54,
},
{
age: 19,
time: 67.7,
winnings: 244.73,
},
{
age: 25,
time: 81.8,
winnings: 219.05,
},
{
age: 27,
time: 138.2,
winnings: 193.13,
},
{
age: 22,
time: 59.7,
winnings: 211.1,
},
{
age: 26,
time: 93.2,
winnings: 186.41,
},
{
age: 20,
time: 102.4,
winnings: 145.25,
},
{
age: 21,
time: 114.8,
winnings: 199.6,
},
{
age: 33,
time: 121.5,
winnings: 221.47,
},
{
age: 27,
time: 70.1,
winnings: 242.4,
},
{
age: 23,
time: 61.5,
winnings: 244.42,
},
{
age: 29,
time: 88.3,
winnings: 246.88,
},
{
age: 24,
time: 152.2,
winnings: 157.58,
},
{
age: 23,
time: 145.9,
winnings: 192.58,
},
{
age: 20,
time: 110.8,
winnings: 168.29,
},
{
age: 25,
time: 150.5,
winnings: 168.18,
},
{
age: 22,
time: 199,
winnings: 224.13,
},
{
age: 21,
time: 105.2,
winnings: 150.16,
},
{
age: 22,
time: 38.9,
winnings: 226.71,
},
{
age: 29,
time: 165.6,
winnings: 296.93,
},
{
age: 27,
time: 150.8,
winnings: 140.15,
},
{
age: 24,
time: 42.2,
winnings: 256.41,
},
{
age: 26,
time: -15,
winnings: 201.3,
},
{
age: 21,
time: 136,
winnings: 299.64,
},
{
age: 25,
time: 18.9,
winnings: 190.56,
},
{
age: 22,
time: 123.5,
winnings: 157.54,
},
{
age: 24,
time: 202.6,
winnings: 241.87,
},
{
age: 24,
time: 71.7,
winnings: 188.39,
},
{
age: 22,
time: 131.2,
winnings: 202.82,
},
{
age: 26,
time: 117,
winnings: 190.08,
},
{
age: 23,
time: 119.5,
winnings: 158.08,
},
{
age: 28,
time: 106.9,
winnings: 166.1,
},
{
age: 24,
time: 72,
winnings: 190.54,
},
{
age: 28,
time: 96.3,
winnings: 132.54,
},
{
age: 19,
time: 81.3,
winnings: 164.15,
},
{
age: 23,
time: 17.2,
winnings: 214.74,
},
{
age: 27,
time: 81.3,
winnings: 248.72,
},
{
age: 24,
time: 135.2,
winnings: 215.81,
},
{
age: 26,
time: 53.5,
winnings: 180.84,
},
{
age: 27,
time: 101.5,
winnings: 186.76,
},
{
age: 20,
time: 106.3,
winnings: 142.84,
},
{
age: 24,
time: 101,
winnings: 236.66,
},
{
age: 20,
time: 166.2,
winnings: 209.94,
},
{
age: 26,
time: 127.7,
winnings: 233.19,
},
{
age: 29,
time: 247.6,
winnings: 284.24,
},
{
age: 24,
time: 110.8,
winnings: 154.96,
},
{
age: 24,
time: 83.5,
winnings: 160.91,
},
{
age: 23,
time: 46,
winnings: 201.76,
},
{
age: 23,
time: 20.2,
winnings: 217.38,
},
{
age: 29,
time: 101.6,
winnings: 232.97,
},
{
age: 27,
time: 48.3,
winnings: 305.82,
},
{
age: 22,
time: 147.7,
winnings: 165.49,
},
{
age: 28,
time: 174.9,
winnings: 138.05,
},
{
age: 25,
time: 18.1,
winnings: 205.32,
},
{
age: 25,
time: 61.1,
winnings: 79.94,
},
{
age: 24,
time: 165.7,
winnings: 209.11,
},
{
age: 29,
time: 130.9,
winnings: 173.16,
},
{
age: 22,
time: 116.2,
winnings: 209.45,
},
{
age: 27,
time: 202.4,
winnings: 232.77,
},
{
age: 21,
time: 255.7,
winnings: 191.64,
},
{
age: 23,
time: 75.5,
winnings: 170.23,
},
{
age: 25,
time: 160.8,
winnings: 167.06,
},
{
age: 25,
time: 107,
winnings: 200.18,
},
{
age: 25,
time: 130,
winnings: 122.53,
},
{
age: 23,
time: 259.4,
winnings: 187.28,
},
{
age: 23,
time: 185.1,
winnings: 123.62,
},
{
age: 18,
time: 94.2,
winnings: 236.59,
},
{
age: 20,
time: 145.4,
winnings: 222.47,
},
{
age: 25,
time: 204.9,
winnings: 139.56,
},
{
age: 20,
time: 114.5,
winnings: 252.99,
},
{
age: 24,
time: -18.9,
winnings: 146.93,
},
{
age: 20,
time: 114.3,
winnings: 222.16,
},
{
age: 21,
time: 117.6,
winnings: 182.48,
},
{
age: 28,
time: 268.3,
winnings: 164.17,
},
{
age: 20,
time: 111,
winnings: 217.49,
},
{
age: 26,
time: 158.9,
winnings: 206.93,
},
{
age: 27,
time: 140.4,
winnings: 192.76,
},
{
age: 24,
time: 138.1,
winnings: 226.27,
},
{
age: 21,
time: 186.2,
winnings: 290.81,
},
{
age: 29,
time: 223.8,
winnings: 147.18,
},
{
age: 28,
time: 65.2,
winnings: 201.66,
},
{
age: 18,
time: 77.2,
winnings: 125.35,
},
{
age: 25,
time: 78.7,
winnings: 235.34,
},
{
age: 24,
time: 114.3,
winnings: 210.51,
},
{
age: 27,
time: 151.4,
winnings: 159.82,
},
{
age: 21,
time: 107.5,
winnings: 237.44,
},
{
age: 24,
time: 119.8,
winnings: 220.33,
},
{
age: 27,
time: 19.3,
winnings: 119.13,
},
{
age: 26,
time: 98.5,
winnings: 277.4,
},
{
age: 26,
time: 90.8,
winnings: 205.01,
},
{
age: 21,
time: 123,
winnings: 178.97,
},
{
age: 30,
time: 132.1,
winnings: 164.01,
},
{
age: 19,
time: 41.3,
winnings: 154.34,
},
{
age: 22,
time: 98,
winnings: 98.53,
},
{
age: 23,
time: 218.2,
winnings: 140.92,
},
{
age: 28,
time: 108,
winnings: 231.51,
},
{
age: 24,
time: 132.6,
winnings: 187.52,
},
{
age: 24,
time: 128.7,
winnings: 109.73,
},
{
age: 24,
time: 170.2,
winnings: 224.77,
},
{
age: 30,
time: 144.9,
winnings: 280.26,
},
{
age: 23,
time: 219.8,
winnings: 169.25,
},
{
age: 22,
time: 66.1,
winnings: 203.49,
},
{
age: 26,
time: 258.6,
winnings: 240,
},
{
age: 28,
time: 107.5,
winnings: 203.82,
},
{
age: 25,
time: 98.4,
winnings: 62,
},
{
age: 25,
time: 104,
winnings: 219.36,
},
{
age: 25,
time: 135.5,
winnings: 198.37,
},
{
age: 24,
time: 162.4,
winnings: 121.78,
},
{
age: 23,
time: 104.4,
winnings: 212.79,
},
{
age: 21,
time: 201,
winnings: 192.47,
},
{
age: 22,
time: 124.8,
winnings: 152.12,
},
{
age: 25,
time: 121.8,
winnings: 196.58,
},
{
age: 22,
time: 130.6,
winnings: 182.1,
},
{
age: 22,
time: 136,
winnings: 221.74,
},
{
age: 23,
time: 4.7,
winnings: 193.95,
},
{
age: 23,
time: 109.8,
winnings: 129.27,
},
{
age: 24,
time: -17,
winnings: 264.02,
},
{
age: 24,
time: 145.4,
winnings: 179.41,
},
{
age: 22,
time: 97,
winnings: 272.55,
},
{
age: 23,
time: 160.3,
winnings: 194.45,
},
{
age: 28,
time: 101.9,
winnings: 137.31,
},
{
age: 27,
time: 212.5,
winnings: 216.47,
},
{
age: 24,
time: -13.6,
winnings: 342.52,
},
{
age: 22,
time: 211,
winnings: 206.79,
},
{
age: 26,
time: 87.3,
winnings: 307.71,
},
{
age: 25,
time: 56.1,
winnings: 282.63,
},
{
age: 25,
time: 63.8,
winnings: 251.4,
},
{
age: 24,
time: 137.2,
winnings: 178.45,
},
{
age: 22,
time: 106.2,
winnings: 202.1,
},
{
age: 22,
time: 90.9,
winnings: 199.35,
},
{
age: 27,
time: 61.7,
winnings: 270.86,
},
{
age: 25,
time: 111,
winnings: 133.82,
},
{
age: 24,
time: 136.8,
winnings: 216.06,
},
{
age: 18,
time: 72.1,
winnings: 257.61,
},
{
age: 31,
time: 282.1,
winnings: 125.25,
},
{
age: 23,
time: 149.6,
winnings: 302.27,
},
{
age: 25,
time: 132.2,
winnings: 131.57,
},
{
age: 29,
time: 87,
winnings: 164.22,
},
{
age: 23,
time: 37.8,
winnings: 230.13,
},
{
age: 23,
time: 83.7,
winnings: 286.45,
},
{
age: 28,
time: 240.5,
winnings: 227.03,
},
{
age: 21,
time: 108.5,
winnings: 227.95,
},
{
age: 23,
time: 153.4,
winnings: 291.85,
},
{
age: 24,
time: 100.7,
winnings: 98.78,
},
{
age: 23,
time: 181.9,
winnings: 310.7,
},
{
age: 23,
time: 183.6,
winnings: 255.28,
},
{
age: 25,
time: 230.6,
winnings: 172.52,
},
{
age: 29,
time: 105.8,
winnings: 180.08,
},
{
age: 25,
time: 171.5,
winnings: 213.5,
},
{
age: 20,
time: 186,
winnings: 177.87,
},
{
age: 17,
time: 37.9,
winnings: 150.89,
},
{
age: 27,
time: 35.9,
winnings: 134.55,
},
{
age: 24,
time: 20.1,
winnings: 192.48,
},
{
age: 23,
time: 191.4,
winnings: 172.87,
},
{
age: 22,
time: 132.1,
winnings: 184.28,
},
{
age: 21,
time: 70.8,
winnings: 323.35,
},
{
age: 22,
time: -61.4,
winnings: 162.2,
},
{
age: 27,
time: 119.9,
winnings: 208.78,
},
{
age: 26,
time: 97.9,
winnings: 145.94,
},
{
age: 25,
time: 197.3,
winnings: 165.77,
},
{
age: 24,
time: 258.3,
winnings: 113.82,
},
{
age: 21,
time: 124,
winnings: 239.78,
},
{
age: 30,
time: 110,
winnings: 176.77,
},
{
age: 26,
time: 186.5,
winnings: 202.73,
},
{
age: 20,
time: 167.1,
winnings: 233.23,
},
{
age: 25,
time: 157.9,
winnings: 222.82,
},
{
age: 25,
time: 60.1,
winnings: 167.32,
},
{
age: 18,
time: 87.4,
winnings: 238.64,
},
{
age: 23,
time: 55.9,
winnings: 188.91,
},
{
age: 27,
time: 31.9,
winnings: 235.76,
},
{
age: 26,
time: 176.6,
winnings: 256.51,
},
{
age: 21,
time: 66.5,
winnings: 243.26,
},
{
age: 25,
time: 236.9,
winnings: 171.77,
},
{
age: 23,
time: 194.1,
winnings: 221.2,
},
{
age: 32,
time: 75.8,
winnings: 104.84,
},
{
age: 19,
time: 170.7,
winnings: 179.39,
},
{
age: 25,
time: 140.3,
winnings: 221.66,
},
{
age: 20,
time: 11.4,
winnings: 161.64,
},
{
age: 25,
time: 106.3,
winnings: 273.87,
},
{
age: 29,
time: 120.4,
winnings: 240.72,
},
{
age: 25,
time: 188.2,
winnings: 199,
},
{
age: 25,
time: 203.1,
winnings: 235.22,
},
{
age: 26,
time: 182.4,
winnings: 166.45,
},
{
age: 24,
time: 90.6,
winnings: 176.94,
},
{
age: 28,
time: 115.3,
winnings: 228.3,
},
{
age: 27,
time: 102.3,
winnings: 182.62,
},
{
age: 22,
time: 72.2,
winnings: 245.47,
},
];
}
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',
},
],
}xKeydefines the data values to be distributed into bins along the horizontal axis.yKeydefines the values determining the height of each bar along the vertical axis. These are aggregated within each bin.xNameandyNameconfigure display names, reflected in the Tooltips.
Aggregation Copy Link
import {
AgCartesianChartOptions,
AgCharts,
AgHistogramSeriesOptions,
AnimationModule,
ContextMenuModule,
CrosshairModule,
HistogramSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
HistogramSeriesModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgCartesianChartOptions = {
title: {
text: "Prize money distribution",
},
subtitle: {
text: "Total winnings by participant age",
},
data: getData(),
series: [
{
type: "histogram",
xKey: "age",
xName: "Participant Age",
yKey: "winnings",
yName: "Winnings",
aggregation: "sum", //default
},
],
axes: {
x: {
type: "number",
title: { text: "Age band (years)" },
interval: { step: 2 },
},
y: {
type: "number",
title: { text: "Total winnings (USD)" },
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
function changeAggregation(event: Event) {
const aggType = (event.target as HTMLInputElement).value as
| "count"
| "sum"
| "mean";
(options.series![0] as AgHistogramSeriesOptions).aggregation = aggType;
options.axes!.y!.title!.text =
aggType == "count" ? "Number of winners" : "Total winnings (USD)";
chart.update(options);
}
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).changeAggregation = changeAggregation;
}
export function getData(): any[] {
return [
{
age: 20,
time: 131.2,
winnings: 207.06,
},
{
age: 25,
time: 115.4,
winnings: 184.69,
},
{
age: 19,
time: 165.1,
winnings: 95.55,
},
{
age: 28,
time: 182.9,
winnings: 160.22,
},
{
age: 31,
time: 338.7,
winnings: 198.3,
},
{
age: 24,
time: 111.4,
winnings: 288.47,
},
{
age: 21,
time: 165.5,
winnings: 224.69,
},
{
age: 21,
time: 46.8,
winnings: 273.39,
},
{
age: 22,
time: 225.4,
winnings: 259.15,
},
{
age: 27,
time: 227.7,
winnings: 223.65,
},
{
age: 25,
time: 227.4,
winnings: 147.61,
},
{
age: 25,
time: 180.1,
winnings: 242.42,
},
{
age: 24,
time: 57,
winnings: 227.12,
},
{
age: 21,
time: 110.9,
winnings: 204.54,
},
{
age: 19,
time: 67.7,
winnings: 244.73,
},
{
age: 25,
time: 81.8,
winnings: 219.05,
},
{
age: 27,
time: 138.2,
winnings: 193.13,
},
{
age: 22,
time: 59.7,
winnings: 211.1,
},
{
age: 26,
time: 93.2,
winnings: 186.41,
},
{
age: 20,
time: 102.4,
winnings: 145.25,
},
{
age: 21,
time: 114.8,
winnings: 199.6,
},
{
age: 33,
time: 121.5,
winnings: 221.47,
},
{
age: 27,
time: 70.1,
winnings: 242.4,
},
{
age: 23,
time: 61.5,
winnings: 244.42,
},
{
age: 29,
time: 88.3,
winnings: 246.88,
},
{
age: 24,
time: 152.2,
winnings: 157.58,
},
{
age: 23,
time: 145.9,
winnings: 192.58,
},
{
age: 20,
time: 110.8,
winnings: 168.29,
},
{
age: 25,
time: 150.5,
winnings: 168.18,
},
{
age: 22,
time: 199,
winnings: 224.13,
},
{
age: 21,
time: 105.2,
winnings: 150.16,
},
{
age: 22,
time: 38.9,
winnings: 226.71,
},
{
age: 29,
time: 165.6,
winnings: 296.93,
},
{
age: 27,
time: 150.8,
winnings: 140.15,
},
{
age: 24,
time: 42.2,
winnings: 256.41,
},
{
age: 26,
time: -15,
winnings: 201.3,
},
{
age: 21,
time: 136,
winnings: 299.64,
},
{
age: 25,
time: 18.9,
winnings: 190.56,
},
{
age: 22,
time: 123.5,
winnings: 157.54,
},
{
age: 24,
time: 202.6,
winnings: 241.87,
},
{
age: 24,
time: 71.7,
winnings: 188.39,
},
{
age: 22,
time: 131.2,
winnings: 202.82,
},
{
age: 26,
time: 117,
winnings: 190.08,
},
{
age: 23,
time: 119.5,
winnings: 158.08,
},
{
age: 28,
time: 106.9,
winnings: 166.1,
},
{
age: 24,
time: 72,
winnings: 190.54,
},
{
age: 28,
time: 96.3,
winnings: 132.54,
},
{
age: 19,
time: 81.3,
winnings: 164.15,
},
{
age: 23,
time: 17.2,
winnings: 214.74,
},
{
age: 27,
time: 81.3,
winnings: 248.72,
},
{
age: 24,
time: 135.2,
winnings: 215.81,
},
{
age: 26,
time: 53.5,
winnings: 180.84,
},
{
age: 27,
time: 101.5,
winnings: 186.76,
},
{
age: 20,
time: 106.3,
winnings: 142.84,
},
{
age: 24,
time: 101,
winnings: 236.66,
},
{
age: 20,
time: 166.2,
winnings: 209.94,
},
{
age: 26,
time: 127.7,
winnings: 233.19,
},
{
age: 29,
time: 247.6,
winnings: 284.24,
},
{
age: 24,
time: 110.8,
winnings: 154.96,
},
{
age: 24,
time: 83.5,
winnings: 160.91,
},
{
age: 23,
time: 46,
winnings: 201.76,
},
{
age: 23,
time: 20.2,
winnings: 217.38,
},
{
age: 29,
time: 101.6,
winnings: 232.97,
},
{
age: 27,
time: 48.3,
winnings: 305.82,
},
{
age: 22,
time: 147.7,
winnings: 165.49,
},
{
age: 28,
time: 174.9,
winnings: 138.05,
},
{
age: 25,
time: 18.1,
winnings: 205.32,
},
{
age: 25,
time: 61.1,
winnings: 79.94,
},
{
age: 24,
time: 165.7,
winnings: 209.11,
},
{
age: 29,
time: 130.9,
winnings: 173.16,
},
{
age: 22,
time: 116.2,
winnings: 209.45,
},
{
age: 27,
time: 202.4,
winnings: 232.77,
},
{
age: 21,
time: 255.7,
winnings: 191.64,
},
{
age: 23,
time: 75.5,
winnings: 170.23,
},
{
age: 25,
time: 160.8,
winnings: 167.06,
},
{
age: 25,
time: 107,
winnings: 200.18,
},
{
age: 25,
time: 130,
winnings: 122.53,
},
{
age: 23,
time: 259.4,
winnings: 187.28,
},
{
age: 23,
time: 185.1,
winnings: 123.62,
},
{
age: 18,
time: 94.2,
winnings: 236.59,
},
{
age: 20,
time: 145.4,
winnings: 222.47,
},
{
age: 25,
time: 204.9,
winnings: 139.56,
},
{
age: 20,
time: 114.5,
winnings: 252.99,
},
{
age: 24,
time: -18.9,
winnings: 146.93,
},
{
age: 20,
time: 114.3,
winnings: 222.16,
},
{
age: 21,
time: 117.6,
winnings: 182.48,
},
{
age: 28,
time: 268.3,
winnings: 164.17,
},
{
age: 20,
time: 111,
winnings: 217.49,
},
{
age: 26,
time: 158.9,
winnings: 206.93,
},
{
age: 27,
time: 140.4,
winnings: 192.76,
},
{
age: 24,
time: 138.1,
winnings: 226.27,
},
{
age: 21,
time: 186.2,
winnings: 290.81,
},
{
age: 29,
time: 223.8,
winnings: 147.18,
},
{
age: 28,
time: 65.2,
winnings: 201.66,
},
{
age: 18,
time: 77.2,
winnings: 125.35,
},
{
age: 25,
time: 78.7,
winnings: 235.34,
},
{
age: 24,
time: 114.3,
winnings: 210.51,
},
{
age: 27,
time: 151.4,
winnings: 159.82,
},
{
age: 21,
time: 107.5,
winnings: 237.44,
},
{
age: 24,
time: 119.8,
winnings: 220.33,
},
{
age: 27,
time: 19.3,
winnings: 119.13,
},
{
age: 26,
time: 98.5,
winnings: 277.4,
},
{
age: 26,
time: 90.8,
winnings: 205.01,
},
{
age: 21,
time: 123,
winnings: 178.97,
},
{
age: 30,
time: 132.1,
winnings: 164.01,
},
{
age: 19,
time: 41.3,
winnings: 154.34,
},
{
age: 22,
time: 98,
winnings: 98.53,
},
{
age: 23,
time: 218.2,
winnings: 140.92,
},
{
age: 28,
time: 108,
winnings: 231.51,
},
{
age: 24,
time: 132.6,
winnings: 187.52,
},
{
age: 24,
time: 128.7,
winnings: 109.73,
},
{
age: 24,
time: 170.2,
winnings: 224.77,
},
{
age: 30,
time: 144.9,
winnings: 280.26,
},
{
age: 23,
time: 219.8,
winnings: 169.25,
},
{
age: 22,
time: 66.1,
winnings: 203.49,
},
{
age: 26,
time: 258.6,
winnings: 240,
},
{
age: 28,
time: 107.5,
winnings: 203.82,
},
{
age: 25,
time: 98.4,
winnings: 62,
},
{
age: 25,
time: 104,
winnings: 219.36,
},
{
age: 25,
time: 135.5,
winnings: 198.37,
},
{
age: 24,
time: 162.4,
winnings: 121.78,
},
{
age: 23,
time: 104.4,
winnings: 212.79,
},
{
age: 21,
time: 201,
winnings: 192.47,
},
{
age: 22,
time: 124.8,
winnings: 152.12,
},
{
age: 25,
time: 121.8,
winnings: 196.58,
},
{
age: 22,
time: 130.6,
winnings: 182.1,
},
{
age: 22,
time: 136,
winnings: 221.74,
},
{
age: 23,
time: 4.7,
winnings: 193.95,
},
{
age: 23,
time: 109.8,
winnings: 129.27,
},
{
age: 24,
time: -17,
winnings: 264.02,
},
{
age: 24,
time: 145.4,
winnings: 179.41,
},
{
age: 22,
time: 97,
winnings: 272.55,
},
{
age: 23,
time: 160.3,
winnings: 194.45,
},
{
age: 28,
time: 101.9,
winnings: 137.31,
},
{
age: 27,
time: 212.5,
winnings: 216.47,
},
{
age: 24,
time: -13.6,
winnings: 342.52,
},
{
age: 22,
time: 211,
winnings: 206.79,
},
{
age: 26,
time: 87.3,
winnings: 307.71,
},
{
age: 25,
time: 56.1,
winnings: 282.63,
},
{
age: 25,
time: 63.8,
winnings: 251.4,
},
{
age: 24,
time: 137.2,
winnings: 178.45,
},
{
age: 22,
time: 106.2,
winnings: 202.1,
},
{
age: 22,
time: 90.9,
winnings: 199.35,
},
{
age: 27,
time: 61.7,
winnings: 270.86,
},
{
age: 25,
time: 111,
winnings: 133.82,
},
{
age: 24,
time: 136.8,
winnings: 216.06,
},
{
age: 18,
time: 72.1,
winnings: 257.61,
},
{
age: 31,
time: 282.1,
winnings: 125.25,
},
{
age: 23,
time: 149.6,
winnings: 302.27,
},
{
age: 25,
time: 132.2,
winnings: 131.57,
},
{
age: 29,
time: 87,
winnings: 164.22,
},
{
age: 23,
time: 37.8,
winnings: 230.13,
},
{
age: 23,
time: 83.7,
winnings: 286.45,
},
{
age: 28,
time: 240.5,
winnings: 227.03,
},
{
age: 21,
time: 108.5,
winnings: 227.95,
},
{
age: 23,
time: 153.4,
winnings: 291.85,
},
{
age: 24,
time: 100.7,
winnings: 98.78,
},
{
age: 23,
time: 181.9,
winnings: 310.7,
},
{
age: 23,
time: 183.6,
winnings: 255.28,
},
{
age: 25,
time: 230.6,
winnings: 172.52,
},
{
age: 29,
time: 105.8,
winnings: 180.08,
},
{
age: 25,
time: 171.5,
winnings: 213.5,
},
{
age: 20,
time: 186,
winnings: 177.87,
},
{
age: 17,
time: 37.9,
winnings: 150.89,
},
{
age: 27,
time: 35.9,
winnings: 134.55,
},
{
age: 24,
time: 20.1,
winnings: 192.48,
},
{
age: 23,
time: 191.4,
winnings: 172.87,
},
{
age: 22,
time: 132.1,
winnings: 184.28,
},
{
age: 21,
time: 70.8,
winnings: 323.35,
},
{
age: 22,
time: -61.4,
winnings: 162.2,
},
{
age: 27,
time: 119.9,
winnings: 208.78,
},
{
age: 26,
time: 97.9,
winnings: 145.94,
},
{
age: 25,
time: 197.3,
winnings: 165.77,
},
{
age: 24,
time: 258.3,
winnings: 113.82,
},
{
age: 21,
time: 124,
winnings: 239.78,
},
{
age: 30,
time: 110,
winnings: 176.77,
},
{
age: 26,
time: 186.5,
winnings: 202.73,
},
{
age: 20,
time: 167.1,
winnings: 233.23,
},
{
age: 25,
time: 157.9,
winnings: 222.82,
},
{
age: 25,
time: 60.1,
winnings: 167.32,
},
{
age: 18,
time: 87.4,
winnings: 238.64,
},
{
age: 23,
time: 55.9,
winnings: 188.91,
},
{
age: 27,
time: 31.9,
winnings: 235.76,
},
{
age: 26,
time: 176.6,
winnings: 256.51,
},
{
age: 21,
time: 66.5,
winnings: 243.26,
},
{
age: 25,
time: 236.9,
winnings: 171.77,
},
{
age: 23,
time: 194.1,
winnings: 221.2,
},
{
age: 32,
time: 75.8,
winnings: 104.84,
},
{
age: 19,
time: 170.7,
winnings: 179.39,
},
{
age: 25,
time: 140.3,
winnings: 221.66,
},
{
age: 20,
time: 11.4,
winnings: 161.64,
},
{
age: 25,
time: 106.3,
winnings: 273.87,
},
{
age: 29,
time: 120.4,
winnings: 240.72,
},
{
age: 25,
time: 188.2,
winnings: 199,
},
{
age: 25,
time: 203.1,
winnings: 235.22,
},
{
age: 26,
time: 182.4,
winnings: 166.45,
},
{
age: 24,
time: 90.6,
winnings: 176.94,
},
{
age: 28,
time: 115.3,
winnings: 228.3,
},
{
age: 27,
time: 102.3,
winnings: 182.62,
},
{
age: 22,
time: 72.2,
winnings: 245.47,
},
];
}
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
},
],
} Histogram Chart Examples Copy Link
See more Histogram Chart examples in the AG Charts Gallery.
Histogram Chart Example
Histogram Chart With Specified Bins Example
Histogram Chart With Missing Bins Example
API Reference Copy Link
Properties available on the AgHistogramSeriesOptions interface.
- type required
'histogram' - Configuration for Histogram Series.
- xKey required
DatumKey - The key to use to retrieve x-values from the data.
- listeners
AgHistogramSeriesListeners - A map of event names to event listeners.
- getItemId
Function - A callback to provide a stable identifier for each bin, exposed as `itemId` in events and active state. The returned identifier must be unique across all bins in the series. If not supplied, an identifier is generated from the bin boundaries.
- id
stringdefault: auto-generated value - Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
- context
ContextDefault - Context object to use in callbacks.
- data
DatumDefault[] - The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
- visible
boolean - Whether to display the series.
- cursor
string - The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
- nodeClickRange
InteractionRange - Range from a node that a click triggers the listener.
- showInLegend
boolean - Whether to include the series in the legend.
- xKeyAxis
stringdefault: 'x' - The key of the x-axis to which this series is bound.
- yKeyAxis
stringdefault: 'y' - The key of the y-axis to which this series is bound.
- yKey
DatumKey - The key to use to retrieve y-values from the data.
- xName
string - A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
- yName
string - A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
- styler
Styler - A callback function for adjusting the styles of the whole series based on the highlight or selection state.
- itemStyler
Styler - A callback function for adjusting the styles of each bin individually, based on its range, frequency and aggregated value.
- shadow
AgDropShadowOptions - Configuration for the shadow used behind the chart series.
- label
AgHistogramSeriesLabelOptions - Configuration for the labels shown on bars.
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- highlight
AgMultiSeriesHighlightOptions - Configuration for highlighting when a series or legend item is hovered over.
- areaPlot
boolean - If `true`, the aggregated `yKey` values will be represented using the area of the bar, instead of just the height.
- bins
[number, number][] - Set the bin sizes explicitly. __Note:__ `bins` is ignored if `binCount` is also supplied.
- binCount
number - The number of bins to try to split the x-axis into.
- aggregation
'count' | 'sum' | 'mean'default: sum - Dictates how the `yKey` values are aggregated within each bin.
- showInMiniChart
boolean - Whether to include the series in the Mini Chart.
- cornerRadius
PixelSize - Apply rounded corners to each bar.
- fill
AgColorType - The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
- fillOpacity
Opacity - The opacity of the fill colour.
- stroke
AgCssColorOrRef - The colour for the stroke.
- strokeWidth
PixelSize - The width of the stroke in pixels.
- strokeOpacity
Opacity - The opacity of the stroke colour.
- lineDash
PixelSize[] - An array specifying the length in pixels of alternating dashes and gaps.
- lineDashOffset
PixelSize - The initial offset of the dashed line in pixels.
Properties available on the AgHistogramSeriesOptions interface.
- type required
'histogram' - Configuration for Histogram Series.
- xKey required
DatumKey - The key to use to retrieve x-values from the data.
- listeners
AgHistogramSeriesListeners - A map of event names to event listeners.
- getItemId
Function - A callback to provide a stable identifier for each bin, exposed as `itemId` in events and active state. The returned identifier must be unique across all bins in the series. If not supplied, an identifier is generated from the bin boundaries.
- id
stringdefault: auto-generated value - Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
- context
ContextDefault - Context object to use in callbacks.
- data
DatumDefault[] - The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
- visible
boolean - Whether to display the series.
- cursor
string - The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
- nodeClickRange
InteractionRange - Range from a node that a click triggers the listener.
- showInLegend
boolean - Whether to include the series in the legend.
- xKeyAxis
stringdefault: 'x' - The key of the x-axis to which this series is bound.
- yKeyAxis
stringdefault: 'y' - The key of the y-axis to which this series is bound.
- yKey
DatumKey - The key to use to retrieve y-values from the data.
- xName
string - A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
- yName
string - A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
- styler
Styler - A callback function for adjusting the styles of the whole series based on the highlight or selection state.
- itemStyler
Styler - A callback function for adjusting the styles of each bin individually, based on its range, frequency and aggregated value.
- shadow
AgDropShadowOptions - Configuration for the shadow used behind the chart series.
- label
AgHistogramSeriesLabelOptions - Configuration for the labels shown on bars.
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- highlight
AgMultiSeriesHighlightOptions - Configuration for highlighting when a series or legend item is hovered over.
- areaPlot
boolean - If `true`, the aggregated `yKey` values will be represented using the area of the bar, instead of just the height.
- bins
[number, number][] - Set the bin sizes explicitly. __Note:__ `bins` is ignored if `binCount` is also supplied.
- binCount
number - The number of bins to try to split the x-axis into.
- aggregation
'count' | 'sum' | 'mean'default: sum - Dictates how the `yKey` values are aggregated within each bin.
- showInMiniChart
boolean - Whether to include the series in the Mini Chart.
- cornerRadius
PixelSize - Apply rounded corners to each bar.
- fill
AgColorType - The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
- fillOpacity
Opacity - The opacity of the fill colour.
- stroke
AgCssColorOrRef - The colour for the stroke.
- strokeWidth
PixelSize - The width of the stroke in pixels.
- strokeOpacity
Opacity - The opacity of the stroke colour.
- lineDash
PixelSize[] - An array specifying the length in pixels of alternating dashes and gaps.
- lineDashOffset
PixelSize - The initial offset of the dashed line in pixels.