---
title: "Sunburst Series"
framework: javascript
version: "14.1.0"
---

# Sunburst Series

A Sunburst Series is used to render hierarchical data structures or trees. Each node in the tree is represented by a segment on a radial circle, with the area of the sum of values.

## Simple Sunburst

#### Organisational Chart

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

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  SunburstSeriesModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data,
  series: [
    {
      type: "sunburst",
      labelKey: "name",
    },
  ],
  title: {
    text: "Organisational Chart",
  },
};

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

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

[Live example: Organisational Chart](https://www.ag-grid.com/charts/typescript/sunburst-series/examples/org-chart)

The Sunburst Series is designed to display a single series and is created using the `sunburst` series type.

```js
{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
        },
    ],
}
```

The data passed in should be an array of nodes, with each node optionally containing children.

```js
const data = [
    {
        name: 'Mariah Vaughan',
        children: [
            {
                name: 'Bushra Thomas',
                children: [
                    { name: 'Cyrus Henderson' },
                    { name: 'Dora Jordan' },
                    { name: 'Skyla Downs' },
                    { name: "Elissa O'Sullivan" },
                ],
            },
        ],
        // ...
    },
    {
        name: 'Nathanael Villa',
        // ...
    },
];
```

The `labelKey` defines what will appear as the title for each sector.

## Sizing

By default, the segments corresponding to leaf nodes will have the same angle.

However, the Sunburst Series is best suited to providing size values to provide relative sizing between these sectors.

#### Custom Sizing

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

const gdpFormatter = new Intl.NumberFormat("en-US", {
  useGrouping: true,
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  SunburstSeriesModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: data,
  series: [
    {
      type: "sunburst",
      labelKey: "name",
      sizeKey: "gdp",
      sizeName: "GDP",
    },
  ],
  title: {
    text: "Top 10 countries by GDP",
  },
  subtitle: {
    text: "2023",
  },
};

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

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

[Live example: Custom Sizing](https://www.ag-grid.com/charts/typescript/sunburst-series/examples/sizing)

The `sizeKey` can be used to provide a numeric value to adjust the relative sizing. Additionally, the optional `sizeName` property can be set to set the title that appears next to the value in tooltips.

```js
{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
            sizeKey: 'gdp',
            sizeName: 'GDP',
        },
    ],
}
```

## Colour Scale

Use `colorScale` to control how `colorKey` values map to colours.

#### Colour Scale

```ts
import {
  AgCharts,
  AgStandaloneChartOptions,
  AgSunburstSeriesOptions,
  GradientLegendModule,
  LegendModule,
  ModuleRegistry,
  SunburstSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";

ModuleRegistry.registerModules([
  GradientLegendModule,
  LegendModule,
  SunburstSeriesModule,
]);

const options: AgStandaloneChartOptions = {
  data: data,
  series: [
    {
      type: "sunburst",
      labelKey: "name",
      colorKey: "gdpChange",
      colorName: "Change",
      colorScale: {
        fills: [{ color: "tomato" }, { color: "gold" }, { color: "seagreen" }],
      },
    },
  ],
  legend: {
    enabled: false,
  },
  gradientLegend: {
    enabled: true,
  },
  title: {
    text: "Top Economies by GDP",
  },
  subtitle: {
    text: "2023 — Year-on-year change",
  },
};

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

const chart = AgCharts.create(options);

function toggleMode(mode: "stops" | "gradient") {
  const series = options.series![0] as AgSunburstSeriesOptions;
  if (mode === "stops") {
    series.colorScale = {
      mode: "discrete",
      fills: [
        { color: "tomato", stop: -0.01, name: "Decline" },
        { color: "gold", stop: 0.01, name: "Flat" },
        { color: "seagreen", name: "Growth" },
      ],
    };
    options.legend = { enabled: true };
    options.gradientLegend = { enabled: false };
  } else {
    series.colorScale = {
      fills: [{ color: "tomato" }, { color: "gold" }, { color: "seagreen" }],
    };
    options.legend = { enabled: false };
    options.gradientLegend = { enabled: true };
  }

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).toggleMode = toggleMode;
}
```

[Live example: Colour Scale](https://www.ag-grid.com/charts/typescript/sunburst-series/examples/gradient-legend)

```js
{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
            colorKey: 'gdpChange',
            colorName: 'Change',
            colorScale: {
                mode: 'discrete',
                fills: [
                    { color: 'tomato', stop: -0.01, name: 'Decline' },
                    { color: 'gold', stop: 0.01, name: 'Flat' },
                    { color: 'seagreen', name: 'Growth' },
                ],
            },
        },
    ],
}
```

In this example:

- Use the toggle to switch between discrete mode with named stops shown in a category legend, and a continuous gradient shown in a gradient legend.

See the [Colour Scale](https://www.ag-grid.com/charts/javascript/colour-scale/) page for the full range of colour scale options including discrete mode, named stops, fixed domains, missing data, and gradient legend customisation.

## Other Colours

#### Other Colours

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

const gdpFormatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
const percentageFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "always",
});
ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  SunburstSeriesModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: data,
  series: [
    {
      type: "sunburst",
      labelKey: "name",
      sizeKey: "gdp",
      sizeName: "GDP",
      fills: ["#D32F2F", "#FF5722", "#283593"],
    },
  ],
  title: {
    text: "Top 10 countries by GDP",
  },
  subtitle: {
    text: "2023",
  },
};

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

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

[Live example: Other Colours](https://www.ag-grid.com/charts/typescript/sunburst-series/examples/other-colors)

```js
{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
            sizeKey: 'gdp',
            sizeName: 'GDP',
            fills: ['#D32F2F', '#FF5722', '#283593'],
        },
    ],
}
```

In this configuration:

- `fills` and `strokes` are an array of colours to use for the fills and strokes, where each node receives the colour indexed by the index of its root node

> **Note**
>
> When `colorScale.fills` is used, the `fills` and `strokes` arrays are ignored.

## Labels

All segments can contain both labels and secondary labels, which can be shrunk to fit in the available space.

#### Labels

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

const gdpFormatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
const percentageFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "always",
});
ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  SunburstSeriesModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: data,
  series: [
    {
      type: "sunburst",
      labelKey: "name",
      sizeKey: "gdp",
      sizeName: "GDP",
      secondaryLabelKey: "gdpChange",
      label: {
        fontSize: 14,
        minimumFontSize: 9,
        spacing: 2,
      },
      secondaryLabel: {
        formatter: ({ value }) =>
          value != null ? percentageFormatter.format(value) : undefined,
      },
      padding: 3,
    },
  ],
  title: {
    text: "Top 10 countries by GDP",
  },
  subtitle: {
    text: "2023",
  },
};

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

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

[Live example: Labels](https://www.ag-grid.com/charts/typescript/sunburst-series/examples/labels)

```js
{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
            secondaryLabelKey: 'gdpChange',
            sizeKey: 'gdp',
            sizeName: 'GDP',
            label: {
                fontSize: 14,
                minimumFontSize: 9,
                spacing: 2,
            },
            secondaryLabel: {
                formatter: ({ value }) => (value != null ? percentageFormatter.format(value) : undefined),
            },
            padding: 3,
        },
    ],
}
```

In this configuration:

- `fontSize` sets the size of the font.
- `minimumFontSize` will enable the font size to shrink down to the given value if there is not enough space.
- `spacing` controls the amount of space below a label.
- `padding` adds space between the edge of a sector and its contents.
- `formatter` allows customising the value of a label using a function.

## Highlighting

#### Highlighting

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  SunburstSeriesModule,
} from "ag-charts-enterprise";
import { energyMix } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  SunburstSeriesModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: energyMix,
  title: {
    text: "Sunburst Highlight States",
  },
  subtitle: {
    text: "Branch-sensitive styling",
  },
  series: [
    {
      type: "sunburst",
      labelKey: "name",
      sizeKey: "value",
      highlight: {
        highlightedItem: { stroke: "green" },
        highlightedBranch: { strokeWidth: 2 },
        unhighlightedItem: { opacity: 0.5 },
        unhighlightedBranch: { opacity: 0.1 },
      },
    },
  ],
};

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

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

[Live example: Highlighting](https://www.ag-grid.com/charts/typescript/sunburst-series/examples/highlight)

Each sunburst highlight state exposes a separate style object.

- `highlightedItem` – the hovered segment.
- `highlightedBranch` – All segments that share the same root node.
- `unhighlightedItem` – All segments in the highlightedBranch that are not the highlighted segment.
- `unhighlightedBranch` – segments that belong to different branches.

```js
{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
            sizeKey: 'value',
            highlight: {
                highlightedItem: { stroke: 'green' },
                highlightedBranch: { strokeWidth: 2 },
                unhighlightedItem: { opacity: 0.5 },
                unhighlightedBranch: { opacity: 0.1 },
            },
        },
    ],
}
```

In this configuration:

- Hovered segments get an accent stroke while preserving the default fill.
- Sibling segments in the same branch inherit `highlightedBranch` styles (merged with their own highlight state).
- Segments in other branches fade based on `unhighlightedBranch`.

## API Reference

#### Sunburst Series

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'sunburst' |  | Configuration for the Sunburst Series. |
| 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. |
| 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. |
| labelKey | string |  | The name of the node key containing the label. |
| secondaryLabelKey | string |  | The name of the node key containing a secondary label. |
| childrenKey | string |  | The name of the node key containing the children. Defaults to `children`. |
| sizeKey | string |  | The name of the node key containing the size value. |
| colorKey | string |  | The name of the node key containing the colour value. This value (along with `colorScale` config) will be used to determine the segment colour. |
| sizeName | string |  | A human-readable description of the size values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| colorName | string |  | A human-readable description of the colour values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| label | AgChartAutoSizedLabelOptions |  | Options for the label in a sector. |
| label.spacing | PixelSize |  | The distance between the label and secondary label, if both are present |
| label.lineHeight | FontSize |  | Line height to use for the label. |
| label.minimumFontSize | FontSize |  | If the label does not fit in the container, setting this will allow the label to pick a font size between its normal `fontSize` and `minimumFontSize` to fit within the container. |
| label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for labels. - `'always'` will always wrap text to fit within the tile. - `'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 tile dimensions, the text will be truncated. - `'never'` disables text wrapping. |
| label.overflowStrategy | 'ellipsis' \| 'hide' |  | Adjusts the behaviour of labels when they overflow - `'ellipsis'` will truncate the text to fit, appending an ellipsis (...) - `'hide'` only displays the label if it completely fits within its bounds, and removes it if it would overflow |
| 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. |
| secondaryLabel | AgChartAutoSizedSecondaryLabelOptions |  | Options for a secondary, smaller label in a sector - displayed under the primary label. |
| secondaryLabel.lineHeight | FontSize |  | Line height to use for the label. |
| secondaryLabel.minimumFontSize | FontSize |  | If the label does not fit in the container, setting this will allow the label to pick a font size between its normal `fontSize` and `minimumFontSize` to fit within the container. |
| secondaryLabel.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for labels. - `'always'` will always wrap text to fit within the tile. - `'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 tile dimensions, the text will be truncated. - `'never'` disables text wrapping. |
| secondaryLabel.overflowStrategy | 'ellipsis' \| 'hide' |  | Adjusts the behaviour of labels when they overflow - `'ellipsis'` will truncate the text to fit, appending an ellipsis (...) - `'hide'` only displays the label if it completely fits within its bounds, and removes it if it would overflow |
| secondaryLabel.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| secondaryLabel.format | string |  | Format string used when rendering labels. |
| secondaryLabel.itemStyler | Styler |  | Function used to style individual datum labels. |
| secondaryLabel.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| secondaryLabel.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| secondaryLabel.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| secondaryLabel.fontFamily | FontFamily |  | The font family for text elements. |
| secondaryLabel.fontStyle | FontStyle |  | The style to use for text elements. |
| secondaryLabel.fontWeight | FontWeight |  | The font weight to use for text elements. |
| secondaryLabel.border | BorderOptions |  | Stroke options for the box border. |
| secondaryLabel.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| secondaryLabel.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| secondaryLabel.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| secondaryLabel.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| secondaryLabel.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| secondaryLabel.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| secondaryLabel.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. |
| secondaryLabel.fillOpacity | Opacity |  | The opacity of the fill colour. |
| cornerRadius | PixelSize |  | Apply rounded corners to each sector. |
| sectorSpacing | PixelSize |  | Spacing between the sectors. |
| padding | PixelSize |  | Minimum distance between text and the edges of the sectors. |
| 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. |
| colorScale | AgColorScale |  | Configuration for colour scale with fills, domain, and mode. |
| colorScale.fills | AgColorScaleColorStop[] |  | Configuration for two or more colours, and the values they are rendered at. |
| colorScale.fills.color (required) | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | Colour at this position. |
| colorScale.fills.stop | number \| bigint |  | Position of this colour in the data domain. In continuous mode, the colour appears exactly at this value. In discrete mode, this is the first value of the next bin. |
| colorScale.fills.name | string |  | Display name for this bin, used in legend and tooltip labels. |
| colorScale.domain | [AgNumericValue, AgNumericValue] |  | Fixed domain for the colour scale. If unset, the domain is derived from the data extent. |
| colorScale.mode | 'continuous' \| 'discrete' | continuous | Whether the fills should be rendered as a continuous gradient or discrete bins. |
| colorScale.missingDataFill | CssColor |  | Fill colour for datums with no `colorKey` value. If unset, each series preserves its default behaviour for missing data. |
| 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. |
| itemStyler | Styler |  | A callback function for adjusting the styles of a particular Sunburst sector based on the input parameters. |
| highlight | AgSunburstSeriesHighlightOptions |  | Highlight configuration for the series. |
| highlight.enabled | boolean | true | Whether highlighting is enabled. |
| highlight.highlightedBranch | AgSunburstSeriesHighlightStyle |  | Style for nodes within the hovered branch. |
| highlight.highlightedBranch.opacity | Opacity |  | Opacity to apply to the sector its labels. |
| highlight.highlightedBranch.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.highlightedBranch.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.highlightedBranch.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedBranch.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedBranch.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedItem | AgSunburstSeriesHighlightStyle |  | Style for the directly hovered node. |
| highlight.highlightedItem.opacity | Opacity |  | Opacity to apply to the sector its labels. |
| 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.unhighlightedItem | AgSunburstSeriesHighlightStyle |  | Style for other nodes within the hovered branch. |
| highlight.unhighlightedItem.opacity | Opacity |  | Opacity to apply to the sector its labels. |
| 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.unhighlightedBranch | AgSunburstSeriesHighlightStyle |  | Style for nodes outside of the hovered branch. |
| highlight.unhighlightedBranch.opacity | Opacity |  | Opacity to apply to the sector its labels. |
| highlight.unhighlightedBranch.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.unhighlightedBranch.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.unhighlightedBranch.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedBranch.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedBranch.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| 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. |