---
title: "Donut Series"
framework: react
version: "14.1.0"
---

# Donut Series

A Donut Series has all the benefits of a Pie Series and allows displaying multiple datasets in a single chart.

## Simple Donut

#### Donut Chart

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  DonutSeriesModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([DonutSeriesModule, LegendModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "Portfolio Composition",
    },
    series: [
      {
        type: "donut",
        calloutLabelKey: "asset",
        angleKey: "amount",
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Donut Chart](https://www.ag-grid.com/charts/reactFunctionalTs/donut-series/examples/simple-donut)

To create a Donut Series, use the `donut` series type.

```js
{
    series: [
        {
            type: 'donut',
            calloutLabelKey: 'asset',
            angleKey: 'amount',
        },
    ],
}
```

An optional `innerRadiusRatio` can be provided which should be a value between `0` and `1` and defines the radius of the inner circle as a ratio of the outer radius of the chart.

## Inner Labels

#### Text Inside a Donut Chart

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  DonutSeriesModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([DonutSeriesModule, LegendModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "Portfolio Composition",
    },
    series: [
      {
        type: "donut",
        calloutLabelKey: "asset",
        angleKey: "amount",
        innerRadiusRatio: 0.9,
        innerLabels: [
          {
            text: "Total Investment",
            fontWeight: "bold",
          },
          {
            text: "$100,000",
            spacing: 4,
            fontSize: 40,
            color: "green",
          },
        ],
        innerCircle: {
          fill: "#c9fdc9",
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Text Inside a Donut Chart](https://www.ag-grid.com/charts/reactFunctionalTs/donut-series/examples/text-inside-donut)

The `innerLabels` property can be used to put several lines of text in the space inside a Donut Series.

The colour of the centre area can be changed by using `innerCircle`.

```js
{
    series: [
        {
            // ...
            innerLabels: [
                {
                    text: 'Total Investment',
                    fontWeight: 'bold',
                },
                {
                    text: '$100,000',
                    spacing: 4,
                    fontSize: 44,
                    color: 'green',
                },
            ],
            innerCircle: {
                fill: '#c9fdc9',
            },
        },
    ],
}
```

## Multiple Donuts

#### Multi-Donut Chart

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  DonutSeriesModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([DonutSeriesModule, LegendModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "Portfolio Composition",
    },
    subtitle: {
      text: "Versus Previous Year",
    },
    series: [
      {
        type: "donut",
        title: {
          text: "Previous Year",
          showInLegend: true,
        },
        calloutLabelKey: "asset",
        angleKey: "previousYear",
        outerRadiusRatio: 1,
        innerRadiusRatio: 0.9,
      },
      {
        type: "donut",
        title: {
          text: "Current Year",
          showInLegend: true,
        },
        calloutLabelKey: "asset",
        angleKey: "currentYear",
        outerRadiusRatio: 0.6,
        innerRadiusRatio: 0.2,
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Multi-Donut Chart](https://www.ag-grid.com/charts/reactFunctionalTs/donut-series/examples/multi-donut)

To render multiple Donut Series in a single chart without overlapping, set an `outerRadiusRatio` in conjunction with an `innerRadiusRatio`.

```js
{
    series: [
        {
            // outer series
            // ...
            outerRadiusRatio: 1, // the default
            innerRadiusRatio: 0.9,
            title: { text: 'Previous Year', showInLegend: true },
        },
        {
            // inner series
            // ...
            outerRadiusRatio: 0.6,
            innerRadiusRatio: 0.2,
            title: { text: 'Current Year', showInLegend: true },
        },
    ],
}
```

In the above configuration:

- The difference of `0.3` between the `innerRadiusRatio` of the outer series and the `outerRadiusRatio` of the inner series determines the size of the gap between the outer and inner series.
- The difference between `outerRadiusRatio` and `innerRadiusRatio` for each series determines the thickness of the ring for that series.
- The `title` provided for each series is displayed above the Donut Series if there is space.
- Using `showInLegend` displays the title within the legend item, allowing differentiation between the two series within the legend.

### Shared Legend

#### Multi-Donut Chart with Shared Legend

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  DonutSeriesModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([DonutSeriesModule, LegendModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "Portfolio Composition",
    },
    subtitle: {
      text: "Versus Previous Year",
    },
    series: [
      {
        type: "donut",
        title: {
          text: "Previous Year",
        },
        calloutLabelKey: "asset",
        legendItemKey: "asset",
        angleKey: "previousYear",
        outerRadiusRatio: 1,
        innerRadiusRatio: 0.9,
      },
      {
        type: "donut",
        title: {
          text: "Current Year",
        },
        legendItemKey: "asset",
        showInLegend: false,
        angleKey: "currentYear",
        outerRadiusRatio: 0.6,
        innerRadiusRatio: 0.2,
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Multi-Donut Chart with Shared Legend](https://www.ag-grid.com/charts/reactFunctionalTs/donut-series/examples/multi-donut-shared)

Providing a matching `legendItemKey` allows synchronising of legend items across multiple Donut Series. When a legend item is clicked, all items with a matching `legendItemKey` are toggled.

```js
{
    series: [
        {
            // ...
            calloutLabelKey: 'asset',
            legendItemKey: 'asset',
        },
        {
            // ...
            legendItemKey: 'asset',
            showInLegend: false,
        },
    ],
}
```

Using `showInLegend: false` for the second series, ensures that there are no duplicate legend items.

## API Reference

#### Donut Series

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'donut' |  | Configuration for Donut Series. |
| angleKey (required) | DatumKey |  | The key to use to retrieve angle values from the data. |
| innerLabels | AgDonutInnerLabel[] |  | Configuration for the text lines to display inside the series. |
| innerLabels.text (required) | string |  | The text to show in the inner label. |
| innerLabels.spacing | PixelSize |  | The spacing in pixels before and after the inner label. |
| innerLabels.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| innerLabels.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| innerLabels.fontFamily | FontFamily |  | The font family for text elements. |
| innerLabels.fontStyle | FontStyle |  | The style to use for text elements. |
| innerLabels.fontWeight | FontWeight |  | The font weight to use for text elements. |
| title | AgDonutTitleOptions |  | Configuration for the series title. |
| title.text | string |  | The text to display. |
| title.spacing | PixelSize |  | Spacing added to help position the text. |
| title.showInLegend | boolean |  | Whether the title text should be shown in the legend. |
| title.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| title.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| title.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| title.fontFamily | FontFamily |  | The font family for text elements. |
| title.fontStyle | FontStyle |  | The style to use for text elements. |
| title.fontWeight | FontWeight |  | The font weight to use for text elements. |
| calloutLabel | AgDonutSeriesLabelOptions |  | Configuration for the labels used outside the sectors. |
| calloutLabel.offset | PixelSize |  | Distance in pixels between the callout line and the label text. |
| calloutLabel.minAngle | Degree |  | Minimum angle in degrees required for a sector to show a label. |
| calloutLabel.avoidCollisions | boolean |  | Avoid callout label collision and overflow by automatically moving colliding labels or reducing the Donut radius. If set to `false`, callout labels may collide with each other and the Donut radius will not change to prevent clipping of callout labels. |
| calloutLabel.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| calloutLabel.format | string |  | Format string used when rendering labels. |
| calloutLabel.itemStyler | Styler |  | Function used to style individual datum labels. |
| calloutLabel.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| calloutLabel.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| calloutLabel.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| calloutLabel.fontFamily | FontFamily |  | The font family for text elements. |
| calloutLabel.fontStyle | FontStyle |  | The style to use for text elements. |
| calloutLabel.fontWeight | FontWeight |  | The font weight to use for text elements. |
| calloutLabel.border | BorderOptions |  | Stroke options for the box border. |
| calloutLabel.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| calloutLabel.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| calloutLabel.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| calloutLabel.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| calloutLabel.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| calloutLabel.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| calloutLabel.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. |
| calloutLabel.fillOpacity | Opacity |  | The opacity of the fill colour. |
| sectorLabel | AgDonutSeriesSectorLabelOptions |  | Configuration for the labels used inside the sectors. |
| sectorLabel.positionOffset | PixelSize |  | Distance in pixels, used to make the label text closer to or further from the center. This offset is applied after positionRatio. |
| sectorLabel.positionRatio | Ratio |  | Position of labels as a ratio proportional to Donut radius (or Donut thickness). Additional offset in pixels can be applied by using positionOffset. |
| sectorLabel.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| sectorLabel.format | string |  | Format string used when rendering labels. |
| sectorLabel.itemStyler | Styler |  | Function used to style individual datum labels. |
| sectorLabel.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| sectorLabel.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| sectorLabel.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| sectorLabel.fontFamily | FontFamily |  | The font family for text elements. |
| sectorLabel.fontStyle | FontStyle |  | The style to use for text elements. |
| sectorLabel.fontWeight | FontWeight |  | The font weight to use for text elements. |
| sectorLabel.border | BorderOptions |  | Stroke options for the box border. |
| sectorLabel.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| sectorLabel.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| sectorLabel.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| sectorLabel.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| sectorLabel.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| sectorLabel.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| sectorLabel.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. |
| sectorLabel.fillOpacity | Opacity |  | The opacity of the fill colour. |
| calloutLine | AgDonutSeriesCalloutOptions |  | Configuration for the callout lines used with the labels for the sectors. |
| calloutLine.colors | CssColor[] |  | The colours to cycle through for the strokes of the callouts. |
| calloutLine.length | PixelSize |  | The length in pixels of the callout lines. |
| calloutLine.strokeWidth | PixelSize |  | The width in pixels of the stroke for callout lines. |
| calloutLine.itemStyler | Styler |  | Function used to style individual callout lines. |
| fills | Array<CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill> |  | The colours to cycle through for the fills of the sectors. An array of colour strings, or fill objects for gradients, patterns, or images. |
| strokes | CssColor[] |  | The colours to cycle through for the strokes of the sectors. |
| fillOpacity | Opacity |  | The opacity of the fill for the sectors. |
| strokeOpacity | Opacity |  | The opacity of the stroke for the sectors. |
| strokeWidth | PixelSize |  | The width in pixels of the stroke for the sectors. |
| rotation | Degree |  | The rotation of the Donut series in degrees. |
| outerRadiusOffset | PixelSize |  | The offset in pixels of the outer radius of the series. |
| outerRadiusRatio | Ratio |  | The ratio of the outer radius of the series. Used to adjust the outer radius proportionally to the automatically calculated value. |
| innerRadiusOffset | PixelSize |  | The offset in pixels of the inner radius of the series. |
| innerRadiusRatio | Ratio | 0.7 | The ratio of the inner radius of the series. |
| radiusMin | number |  | Override of the automatically determined minimum radiusKey value from the data. |
| radiusMax | number |  | Override of the automatically determined maximum radiusKey value from the data. |
| 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. |
| 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. |
| innerCircle | AgDonutInnerCircle |  | Configuration for the area inside the series. |
| innerCircle.fill (required) | CssColor |  | The colour of the fill for the inner circle. |
| innerCircle.fillOpacity | Opacity |  | The opacity of the fill for the inner circle. |
| cornerRadius | PixelSize |  | Apply rounded corners to each sector. |
| sectorSpacing | PixelSize |  | The spacing between Donut sectors. |
| hideZeroValueSectorsInLegend | boolean |  | Whether items with a value of 0 should be hidden in the legend. |
| itemStyler | Styler |  | A styler function for adjusting the styling of the Donut sectors. |
| 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. |
| 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. |
| 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. |
| radiusKey | DatumKey |  | The key to use to retrieve radius values from the data. |
| calloutLabelKey | DatumKey |  | The key to use to retrieve label values from the data. |
| sectorLabelKey | DatumKey |  | The key to use to retrieve sector label values from the data. |
| legendItemKey | DatumKey |  | The key to use to retrieve legend item labels from the data. If multiple series share this key they will be merged in the legend. |
| angleName | string |  | A human-readable description of the angle values. If supplied, this will be passed to the tooltip renderer as one of the parameters. |
| radiusName | string |  | A human-readable description of the radius values. If supplied, this will be passed to the tooltip renderer as one of the parameters. |
| calloutLabelName | string |  | A human-readable description of the label values. If supplied, this will be passed to the tooltip renderer as one of the parameters. |
| sectorLabelName | string |  | A human-readable description of the sector label values. If supplied, this will be passed to the tooltip renderer as one of the parameters. |
| 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. |