---
title: "Box Plot Series"
enterprise: true
framework: javascript
version: "14.1.0"
---

# Box Plot Series

A Box Plot Series, also known as a Box-and-Whisker Plot, visually summarises a dataset's distribution through its median and quartiles.

## Simple Box Plot

#### Simple Box Plot

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  BoxPlotSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  BoxPlotSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  title: {
    text: "HR Analytics",
  },
  subtitle: {
    text: "Salary Distribution by Department",
  },
  data: getData(),
  series: [
    {
      type: "box-plot",
      yName: "Employee Salaries",
      xKey: "department",
      minKey: "min",
      q1Key: "q1",
      medianKey: "median",
      q3Key: "q3",
      maxKey: "max",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Simple Box Plot](https://www.ag-grid.com/charts/typescript/box-plot-series/examples/simple-box-plot)

To create a Box Plot Series, use the `box-plot` series type.

```js
{
    series: [
        {
            type: 'box-plot',
            yName: 'Employee Salaries',
            xKey: 'department',
            minKey: 'min',
            q1Key: 'q1',
            medianKey: 'median',
            q3Key: 'q3',
            maxKey: 'max',
        },
    ],
}
```

In this configuration:

- `yName` specifies the tooltip title.
- `xKey` sets the box plot's category.
- `minKey` maps to the minimum value.
- `q1Key` maps to the first quartile (Q1).
- `medianKey` maps to the median.
- `q3Key` maps to the third quartile (Q3).
- `maxKey` maps to the maximum value.

Note the default orientation of a Box Plot is vertical.

## Horizontal Box Plot

#### Horizontal Box Plot

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  BoxPlotSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  BoxPlotSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  title: {
    text: "HR Analytics",
  },
  subtitle: {
    text: "Salary Distribution by Role",
  },
  data: getData(),
  series: [
    {
      type: "box-plot",
      direction: "horizontal",
      yName: "Employee Salaries",
      xKey: "role",
      xName: "Role",
      minKey: "min",
      minName: "Min",
      q1Key: "q1",
      q1Name: "Q1",
      medianKey: "median",
      medianName: "Median",
      q3Key: "q3",
      q3Name: "Q3",
      maxKey: "max",
      maxName: "Max",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Horizontal Box Plot](https://www.ag-grid.com/charts/typescript/box-plot-series/examples/horizontal-box-plot)

To show a Horizontal Box Plot, set `direction: 'horizontal'`.

```js
{
    series: [
        {
            type: 'box-plot',
            direction: 'horizontal',
            xKey: 'department',
            // ...
        },
    ],
}
```

Note that the `xKey` specifies the category values, regardless of series orientation.

## Customisation

#### Box Plot Customisations

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  BoxPlotSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  BoxPlotSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  title: {
    text: "HR Analytics",
  },
  subtitle: {
    text: "Salary Distribution by Role",
  },
  data: getData(),
  series: [
    {
      type: "box-plot",
      yName: "Employee Salaries",
      xKey: "role",
      xName: "Role",
      minKey: "min",
      minName: "Min",
      q1Key: "q1",
      q1Name: "Q1",
      medianKey: "median",
      medianName: "Median",
      q3Key: "q3",
      q3Name: "Q3",
      maxKey: "max",
      maxName: "Max",
      fill: "#7fc3c3",
      stroke: "#098a89",
      strokeWidth: 2,
      whisker: {
        stroke: "#098a89",
        strokeWidth: 3,
        lineDash: [2, 1],
      },
      cap: {
        lengthRatio: 0.8,
      },
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Box Plot Customisations](https://www.ag-grid.com/charts/typescript/box-plot-series/examples/box-plot-customisations)

Box Plot whiskers and caps typically inherit series styles but can be individually customised. Here, the `whisker` and `cap` properties are used to customise whisker line styles and cap length.

```js
{
    series: [
        {
            type: 'box-plot',
            // Other series options...
            whisker: {
                stroke: '#098a89',
                strokeWidth: 3,
                lineDash: [2, 1],
            },
            cap: {
                lengthRatio: 0.8, // 80% of bar's width (default is 0.5)
            },
        },
    ],
}
```

## Box Plot With Outliers

#### Box Plot Outliers

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  BoxPlotSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  ScatterSeriesModule,
} from "ag-charts-enterprise";
import { getBoxPlotData, getOutliersData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  BoxPlotSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  ScatterSeriesModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  title: {
    text: "HR Analytics",
  },
  subtitle: {
    text: "Salary Distribution by Role",
  },
  series: [
    {
      data: getBoxPlotData(),
      type: "box-plot",
      yName: "Employee Salaries",
      xKey: "role",
      xName: "Role",
      minKey: "min",
      minName: "Min",
      q1Key: "q1",
      q1Name: "Q1",
      medianKey: "median",
      medianName: "Median",
      q3Key: "q3",
      q3Name: "Q3",
      maxKey: "max",
      maxName: "Max",
    },
    {
      data: getOutliersData(),
      type: "scatter",
      xKey: "role",
      xName: "Role",
      yKey: "salary",
      yName: "Data Outliers",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Box Plot Outliers](https://www.ag-grid.com/charts/typescript/box-plot-series/examples/box-plot-outliers)

Box plots are commonly paired with outliers to offer a more comprehensive view of the data. This is easily achieved by combining a Box Plot Series with a [Scatter Series](https://www.ag-grid.com/charts/javascript/scatter-series/), as shown below:

```js
{
    series: [
        {
            data: boxPlotData,
            type: 'box-plot',
            // ...
        },
        {
            data: outliersData,
            type: 'scatter',
            // ...
        },
    ],
}
```

## API Reference

#### Box Plot Series

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'box-plot' |  | Configuration for the Box Plot Series. |
| xKey (required) | DatumKey |  | The key used to retrieve x-values (categories) from the data. |
| minKey (required) | DatumKey |  | The key to use to retrieve minimum values from the data. |
| q1Key (required) | DatumKey |  | The key to use to retrieve lower quartile values from the data. |
| medianKey (required) | DatumKey |  | The key to use to retrieve median values from the data. |
| q3Key (required) | DatumKey |  | The key to use to retrieve upper quartile values from the data. |
| maxKey (required) | DatumKey |  | The key to use to retrieve maximum values from the data. |
| grouped | boolean |  | Whether to group together (adjacently) separate columns. |
| legendItemName | string |  | Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together. |
| direction | 'horizontal' \| 'vertical' |  | Bar rendering direction.  __Note:__ This option affects the layout direction of X and Y data values. |
| 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. |
| styler | Styler |  | Function used to return formatting for entire series, based on the given parameters. |
| itemStyler | Styler |  | Function used to return formatting for individual columns, based on the given parameters. |
| highlight | AgMultiSeriesHighlightOptions |  | Configuration for highlighting when a series or legend item is hovered over. |
| highlight.highlightedSeries | AgBoxPlotHighlightStyleOptions |  | Options for the highlighted series. |
| highlight.highlightedSeries.opacity | number |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.highlightedSeries.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| highlight.highlightedSeries.cap | AgBoxPlotCapOptions |  | Options to style chart's caps |
| highlight.highlightedSeries.cap.lengthRatio | Ratio | 0.5 | The length of the cap lines as a ratio of the box width. |
| highlight.highlightedSeries.whisker | AgBoxPlotWhiskerOptions |  | Options to style chart's whiskers |
| highlight.highlightedSeries.whisker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedSeries.whisker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedSeries.whisker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedSeries.whisker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.highlightedSeries.whisker.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.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.unhighlightedSeries | AgBoxPlotHighlightStyleOptions |  | Options for the un-highlighted series when there is an active highlight. |
| highlight.unhighlightedSeries.opacity | number |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.unhighlightedSeries.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| highlight.unhighlightedSeries.cap | AgBoxPlotCapOptions |  | Options to style chart's caps |
| highlight.unhighlightedSeries.cap.lengthRatio | Ratio | 0.5 | The length of the cap lines as a ratio of the box width. |
| highlight.unhighlightedSeries.whisker | AgBoxPlotWhiskerOptions |  | Options to style chart's whiskers |
| highlight.unhighlightedSeries.whisker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedSeries.whisker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedSeries.whisker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.unhighlightedSeries.whisker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.unhighlightedSeries.whisker.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.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.bringToFront | boolean | true | Show this series in front when highlighted. |
| highlight.enabled | boolean |  | Set to `false` to disable highlighting. |
| highlight.highlightedItem | AgBoxPlotHighlightStyleOptions |  | Options for the highlighted item. |
| highlight.highlightedItem.opacity | number |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.highlightedItem.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| highlight.highlightedItem.cap | AgBoxPlotCapOptions |  | Options to style chart's caps |
| highlight.highlightedItem.cap.lengthRatio | Ratio | 0.5 | The length of the cap lines as a ratio of the box width. |
| highlight.highlightedItem.whisker | AgBoxPlotWhiskerOptions |  | Options to style chart's whiskers |
| highlight.highlightedItem.whisker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedItem.whisker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedItem.whisker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedItem.whisker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.highlightedItem.whisker.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.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.unhighlightedItem | AgBoxPlotHighlightStyleOptions |  | Options for the un-highlighted items when there is an active highlight. |
| highlight.unhighlightedItem.opacity | number |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.unhighlightedItem.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| highlight.unhighlightedItem.cap | AgBoxPlotCapOptions |  | Options to style chart's caps |
| highlight.unhighlightedItem.cap.lengthRatio | Ratio | 0.5 | The length of the cap lines as a ratio of the box width. |
| highlight.unhighlightedItem.whisker | AgBoxPlotWhiskerOptions |  | Options to style chart's whiskers |
| highlight.unhighlightedItem.whisker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedItem.whisker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedItem.whisker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.unhighlightedItem.whisker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.unhighlightedItem.whisker.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. |
| 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. |
| segmentation | AgSeriesSegmentation |  | Configuration for styling series as separate segments. |
| segmentation.key (required) | 'x' \| 'y' |  | The axis key used for segmentation. |
| segmentation.segments (required) | AgSeriesShapeSegmentOptions[] |  | Configuration for each segment. |
| segmentation.segments.start | AxisValue |  | The axis value at which the styles should start. This is the start of the axis domain by default. |
| segmentation.segments.stop | AxisValue |  | The axis value at which the styles should stop. This is the end of the axis domain by default. |
| segmentation.segments.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| segmentation.segments.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| segmentation.segments.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| segmentation.segments.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| segmentation.segments.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| segmentation.segments.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. |
| segmentation.segments.fillOpacity | Opacity |  | The opacity of the fill colour. |
| segmentation.enabled | boolean |  | Whether segmentation is enabled. |
| width | PixelSize |  | Fixed width of each box in the series. |
| widthRatio | Ratio |  | Ratio of the bandwidth (or specified width) to use for the width for each box in the series. |
| showInMiniChart | boolean |  | Whether to include the series in the Mini Chart. |
| cursor | string |  | The cursor to use for hovered markers. This config is identical to the CSS `cursor` property. |
| context | ContextDefault |  | Context object to use in callbacks. |
| selection | AgSelectionOptions |  | Configuration for data selection. |
| selection.enabled | boolean |  | Set to `true` to enable the data-selection on this series. |
| selection.containment | 'any' \| 'all' | chart.selection.containment | Override the drag-to-select containment rule for this series. |
| selection.selectedItem | AgSelectionStyleOptions |  | Styling options for selected items. |
| selection.selectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.selectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.selectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.selectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.selectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.selectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.selectedItem.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. |
| selection.selectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedItem | AgSelectionStyleOptions |  | Styling options for unselected items. |
| selection.unselectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedItem.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. |
| selection.unselectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedSeries | AgSelectionStyleOptions |  | Styling options for series with no selections when there is at least one other selected series. |
| selection.unselectedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedSeries.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. |
| selection.unselectedSeries.fillOpacity | Opacity |  | The opacity of the fill colour. |
| 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. |
| listeners | AgSeriesListeners |  | A map of event names to event listeners. |
| listeners.seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. |
| listeners.seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double-clicked. |
| cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| cap | AgBoxPlotCapOptions |  | Options to style chart's caps |
| cap.lengthRatio | Ratio | 0.5 | The length of the cap lines as a ratio of the box width. |
| whisker | AgBoxPlotWhiskerOptions |  | Options to style chart's whiskers |
| whisker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| whisker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| whisker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| whisker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| whisker.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| 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. |
| 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. |
| 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. |
| 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. |
| xName | string |  | A descriptive label for x-values. |
| minName | string |  | A human-readable description of minimum values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| q1Name | string |  | A human-readable description of lower quartile values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| medianName | string |  | A human-readable description of median values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| q3Name | string |  | A human-readable description of upper quartile values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| maxName | string |  | A human-readable description of maximum 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 descriptive label for y-values. |