--- title: "Histogram Series" enterprise: true framework: react version: "14.1.0" --- # Histogram 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 #### Simple Histogram ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgCharts } from "ag-charts-react"; import { AgChartOptions, AnimationModule, ContextMenuModule, CrosshairModule, HistogramSeriesModule, LegendModule, ModuleRegistry, NumberAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CrosshairModule, HistogramSeriesModule, LegendModule, NumberAxisModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ 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" }, }, }, }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Simple Histogram](https://www.ag-grid.com/charts/reactFunctionalTs/histogram-series/examples/simple) To create a Histogram Series, use the `histogram` series type and provide an `xKey`. ```js { 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](https://www.ag-grid.com/charts/react/tooltips/). ## Bin Customisation ### Bin Count #### Larger Bin Count ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgCharts } from "ag-charts-react"; import { AgChartOptions, AnimationModule, ContextMenuModule, CrosshairModule, HistogramSeriesModule, LegendModule, ModuleRegistry, NumberAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CrosshairModule, HistogramSeriesModule, LegendModule, NumberAxisModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ 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" }, }, }, }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Larger Bin Count](https://www.ag-grid.com/charts/reactFunctionalTs/histogram-series/examples/larger-bin-count) The approximate number of bins to aim for can be overridden by setting the `binCount` property. ```js { series: [ { type: 'histogram', xKey: 'age', binCount: 20, }, ], } ``` ### Irregular Intervals #### Irregular Intervals ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgCharts } from "ag-charts-react"; import { AgChartOptions, AnimationModule, ContextMenuModule, CrosshairModule, HistogramSeriesModule, LegendModule, ModuleRegistry, NumberAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CrosshairModule, HistogramSeriesModule, LegendModule, NumberAxisModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ 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" }, }, }, }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Irregular Intervals](https://www.ag-grid.com/charts/reactFunctionalTs/histogram-series/examples/irregular-intervals) Rather than specifying the number of bins, it is possible to explicitly give the start and end values for each bin. ```js { 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. > **Warning** > > If both `bins` and `binCount` properties are provided, `binCount` takes precedence. ## 2D Histogram #### XY Histogram ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgCharts } from "ag-charts-react"; import { AgChartOptions, AnimationModule, ContextMenuModule, CrosshairModule, HistogramSeriesModule, LegendModule, ModuleRegistry, NumberAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CrosshairModule, HistogramSeriesModule, LegendModule, NumberAxisModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ 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)" }, }, }, }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: XY Histogram](https://www.ag-grid.com/charts/reactFunctionalTs/histogram-series/examples/2d-histogram) To provide Y values as well as X values, specify both `xKey` and `yKey` properties. ```js { 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](#aggregation) within each bin. - `xName` and `yName` configure display names, reflected in the [Tooltips](https://www.ag-grid.com/charts/react/tooltips/). ### Aggregation #### Aggregation ```tsx import React, { useState, Fragment } from "react"; import { createRoot } from "react-dom/client"; import { AgCharts } from "ag-charts-react"; import { AgCartesianChartOptions, AgHistogramSeriesOptions, AnimationModule, ContextMenuModule, CrosshairModule, HistogramSeriesModule, LegendModule, ModuleRegistry, NumberAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; import clone from "clone"; ModuleRegistry.registerModules([ AnimationModule, CrosshairModule, HistogramSeriesModule, LegendModule, NumberAxisModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ 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)" }, }, }, }); const changeAggregation = (aggType: "count" | "sum" | "mean") => { const nextOptions = clone(options); (nextOptions.series![0] as AgHistogramSeriesOptions).aggregation = aggType; nextOptions.axes!.y!.title!.text = aggType == "count" ? "Number of winners" : "Total winnings (USD)"; setOptions(nextOptions); }; return (
); }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Aggregation](https://www.ag-grid.com/charts/reactFunctionalTs/histogram-series/examples/aggregation-histogram) The default aggregation method is `sum`. Use the `aggregation` option to change this to `count` or `mean`. ```js { series: [ { type: 'histogram', xKey: 'age', xName: 'Participant Age', yKey: 'winnings', yName: 'Winnings', aggregation: 'sum', //default }, ], } ``` ## API Reference #### Histogram Series | Property | Type | Default | Description | | --- | --- | --- | --- | | 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. | | listeners.seriesNodeClick | Listener | | The listener to call when a histogram bin is clicked. | | listeners.seriesNodeDoubleClick | Listener | | The listener to call when a histogram bin is double-clicked. | | 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 | string | 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 | PixelSize \| 'exact' \| 'nearest' \| 'area' | | Range from a node that a click triggers the listener. | | showInLegend | boolean | | Whether to include the series in the legend. | | xKeyAxis | string | 'x' | The key of the x-axis to which this series is bound. | | yKeyAxis | string | '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. | | shadow.enabled | boolean | | Whether the shadow is visible. | | shadow.color | CssColor | | The colour of the shadow. | | shadow.xOffset | PixelSize | | The horizontal offset in pixels for the shadow. | | shadow.yOffset | PixelSize | | The vertical offset in pixels for the shadow. | | shadow.blur | PixelSize | | The radius of the shadow's blur, given in pixels. | | label | AgHistogramSeriesLabelOptions | | Configuration for the labels shown on bars. | | label.placement | AgHistogramSeriesLabelPlacement \| AgHistogramSeriesLabelPlacement[] | | Where to render series labels relative to the bars. Either a single placement or an ordered fallback list tried in turn until one fits. | | label.spacing | PixelSize | | Distance between the bar edges and the text. | | label.orientation | AgChartLabelOrientation \| AgChartLabelOrientation[] | horizontal | Orientation of the label within the bar. `horizontal` reads upright; the two `vertical` variants rotate it a quarter-turn in opposite directions. Either a single orientation or an ordered fallback list tried in turn until one fits. | | label.formatter | RichFormatter | | A custom formatting function used to convert data values into text for display by labels. | | label.format | string | | Format string used when rendering labels. | | label.itemStyler | Styler | | Function used to style individual datum labels. | | label.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for text elements. A colour string, or a theme-colour reference object. | | label.fontSize | FontSize | | The size of the font in pixels for text elements. | | label.fontFamily | FontFamily | | The font family for text elements. | | label.fontStyle | FontStyle | | The style to use for text elements. | | label.fontWeight | FontWeight | | The font weight to use for text elements. | | label.border | BorderOptions | | Stroke options for the box border. | | label.border.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | label.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | label.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | label.cornerRadius | PixelSize | | Apply rounded corners to the label box. | | label.padding | PixelSize \| PaddingOptions | | Distance between the label text and the border. A number applies uniform padding; an object sets each side. | | label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | label.fillOpacity | Opacity | | The opacity of the fill colour. | | label.collision | AgChartLabelCollisionOptions | | Configuration controlling the spacing kept from obstacles and whether a label that cannot be placed clear of every obstacle is kept at its least-overflowing placement or hidden. | | label.collision.threshold | PixelSize | | Collision threshold in pixels. A positive value triggers avoidance strategies when labels are further away, a negative value allows labels to overlap without triggering avoidance. | | label.collision.alwaysShow | boolean | | Whether to keep a colliding label visible when a collision remains after every avoidance strategy has been applied. When `true` the label stays at the best available position; when `false` it is hidden instead. | | label.maxWidth | PixelSize | | Maximum width, in pixels, the label may occupy before it is wrapped or truncated to fit. | | label.maxHeight | PixelSize | | Maximum height, in pixels, the label may occupy before it is wrapped or truncated to fit. | | label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | | Text wrapping strategy applied when the label is constrained by `maxWidth` or `maxHeight`. - `'always'` will always wrap text to fit within the bounds. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the bounds, the text will be truncated. - `'never'` disables text wrapping. | | label.truncate | boolean | | Whether to truncate the label with an ellipsis when it does not fit within its bounds. | | label.insideStyle | AgChartLabelPlacementStyleOptions | | Style overrides applied only when the label's resolved placement is inside the shape. | | label.insideStyle.cornerRadius | PixelSize | | Rounded corners applied to the label box for this placement. | | label.insideStyle.padding | PixelSize \| PaddingOptions | | Distance between the label text and the box edge for this placement. | | label.insideStyle.border | StrokeOptions | | Border stroke applied to the label box for this placement. | | label.insideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | label.insideStyle.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | label.insideStyle.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | label.insideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for text elements. A colour string, or a theme-colour reference object. | | label.insideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | label.insideStyle.fillOpacity | Opacity | | The opacity of the fill colour. | | label.outsideStyle | AgChartLabelPlacementStyleOptions | | Style overrides applied only when the label's resolved placement is outside the shape. | | label.outsideStyle.cornerRadius | PixelSize | | Rounded corners applied to the label box for this placement. | | label.outsideStyle.padding | PixelSize \| PaddingOptions | | Distance between the label text and the box edge for this placement. | | label.outsideStyle.border | StrokeOptions | | Border stroke applied to the label box for this placement. | | label.outsideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | label.outsideStyle.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | label.outsideStyle.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | label.outsideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for text elements. A colour string, or a theme-colour reference object. | | label.outsideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | label.outsideStyle.fillOpacity | Opacity | | The opacity of the fill colour. | | tooltip | AgSeriesTooltip | | Series-specific tooltip configuration. | | tooltip.enabled | boolean | | Whether to show tooltips when the series are hovered over. | | tooltip.showArrow | boolean | | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. | | tooltip.range | PixelSize \| 'exact' \| 'nearest' \| 'area' | | Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. | | tooltip.position | AgTooltipPositionOptions | | The position of the tooltip. Each series type uses its own default; typically this is `'node'` for marker-based series and `'pointer'` for shape-based series. | | tooltip.position.anchorTo | AgTooltipAnchorTo | | The element or point to position the tooltip relative to. | | tooltip.position.placement | AgTooltipPlacement \| AgTooltipPlacement[] | | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. | | tooltip.position.xOffset | PixelSize | | The horizontal offset in pixels for the position of the tooltip. | | tooltip.position.yOffset | PixelSize | | The vertical offset in pixels for the position of the tooltip. | | tooltip.position.offset | PixelSize | | The distance in pixels between the tooltip and its anchor point, applied in the placement direction. Default: `12` (`0` when `anchorTo` is `'chart'`). | | tooltip.interaction | AgSeriesTooltipInteraction | | Configuration for tooltip interaction. | | tooltip.interaction.enabled (required) | boolean | | Set to `true` to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text | | tooltip.renderer | Renderer | | Function used to create the content for tooltips. | | highlight | AgMultiSeriesHighlightOptions | | Configuration for highlighting when a series or legend item is hovered over. | | highlight.highlightedSeries | AgHighlightStyleOptions | | Options for the highlighted series. | | highlight.highlightedSeries.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.highlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.highlightedSeries.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.highlightedSeries.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.highlightedSeries.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.highlightedSeries.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.highlightedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.highlightedSeries.fillOpacity | Opacity | | The opacity of the fill colour. | | highlight.unhighlightedSeries | AgHighlightStyleOptions | | Options for the un-highlighted series when there is an active highlight. | | highlight.unhighlightedSeries.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.unhighlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.unhighlightedSeries.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.unhighlightedSeries.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.unhighlightedSeries.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.unhighlightedSeries.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.unhighlightedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.unhighlightedSeries.fillOpacity | Opacity | | The opacity of the fill colour. | | highlight.bringToFront | boolean | true | Show this series in front when highlighted. | | highlight.enabled | boolean | | Set to `false` to disable highlighting. | | highlight.highlightedItem | AgHighlightStyleOptions | | Options for the highlighted item. | | highlight.highlightedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.highlightedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.highlightedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.highlightedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.highlightedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.highlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.highlightedItem.fillOpacity | Opacity | | The opacity of the fill colour. | | highlight.unhighlightedItem | AgHighlightStyleOptions | | Options for the un-highlighted items when there is an active highlight. | | highlight.unhighlightedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.unhighlightedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.unhighlightedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.unhighlightedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.unhighlightedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.unhighlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.unhighlightedItem.fillOpacity | Opacity | | The opacity of the fill colour. | | 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' | 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 | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | 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 | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | 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. |