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

# Sankey Series

A Sankey Series visualises movement or change between different items, using nodes and links.

## Simple Sankey

#### Sankey Diagram

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  SankeySeriesModule,
} from "ag-charts-enterprise";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "UK Power Generation",
    },
    subtitle: {
      text: "2023",
    },
    data: [
      { from: "Wind", to: "Renewables", size: 79 },
      { from: "Nuclear", to: "Renewables", size: 38 },
      { from: "Biomass", to: "Renewables", size: 14 },
      { from: "Solar", to: "Renewables", size: 13 },
      { from: "Hydro", to: "Renewables", size: 3 },
      { from: "Natural Gas", to: "Fossil Fuels", size: 86 },
      { from: "Coal", to: "Fossil Fuels", size: 3 },
      { from: "Imports", to: "Total", size: 33 },
      { from: "Fossil Fuels", to: "Total", size: 89 },
      { from: "Renewables", to: "Total", size: 147 },
    ],
    series: [
      {
        type: "sankey",
        fromKey: "from",
        toKey: "to",
        sizeKey: "size",
        sizeName: "Total (GWh)",
      },
    ],
  });

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

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

[Live example: Sankey Diagram](https://www.ag-grid.com/charts/reactFunctionalTs/sankey-series/examples/simple-sankey)

To create a Sankey Series, use the `sankey` series type.

```js
{
    series: [
        {
            type: 'sankey',
            fromKey: 'from',
            toKey: 'to',
            sizeKey: 'size',
        },
    ],
}
```

In this configuration:

- `fromKey` defines the start node of each link.
- `toKey` defines the end node of each link.
- `sizeKey` defines the size of each link.

> **Warning**
>
> Circular loops are not allowed in Sankey diagrams, and links forming a circular loop will be removed.

## Node Layout

### Horizontal Alignment

The horizontal placement of the nodes can be customised using the `alignment` property on `node`.

#### Alignment

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgFlowProportionChartOptions,
  AgSankeySeriesOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  SankeySeriesModule,
} from "ag-charts-enterprise";
import clone from "clone";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgFlowProportionChartOptions>({
    title: {
      text: "Company Revenue",
    },
    subtitle: {
      text: "2023",
    },
    data: [
      { from: "Employees", to: "Sales", size: 2 },
      { from: "Contractors", to: "Sales", size: 2 },
      { from: "Sales", to: "Revenue", size: 4 },
      { from: "Licenses", to: "Revenue", size: 4 },
      { from: "Revenue", to: "Cost of Sales", size: 1 },
      { from: "Revenue", to: "Profit", size: 7 },
      { from: "Profit", to: "Other Expenses", size: 2 },
      { from: "Profit", to: "Operational Profit", size: 5 },
      { from: "Operational Profit", to: "Shareholders", size: 3 },
      { from: "Operational Profit", to: "Employee Bonuses", size: 2 },
    ],
    series: [
      {
        type: "sankey",
        fromKey: "from",
        toKey: "to",
        sizeKey: "size",
        sizeName: "Total (USD millions)",
        node: {
          alignment: "left",
        },
      },
    ],
  });

  const alignLeft = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).node!.alignment = "left";

    setOptions(nextOptions);
  };

  const alignRight = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).node!.alignment = "right";

    setOptions(nextOptions);
  };

  const alignCenter = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).node!.alignment =
      "center";

    setOptions(nextOptions);
  };

  const alignJustify = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).node!.alignment =
      "justify";

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={alignLeft}>
            <code>'left'</code>
          </button>
          <button onClick={alignRight}>
            <code>'right'</code>
          </button>
          <button onClick={alignCenter}>
            <code>'center'</code>
          </button>
          <button onClick={alignJustify}>
            <code>'justify'</code>
          </button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Alignment](https://www.ag-grid.com/charts/reactFunctionalTs/sankey-series/examples/alignment)

```js
{
    series: [
        {
            type: 'sankey',
            fromKey: 'from',
            toKey: 'to',
            sizeKey: 'size',
            node: {
                alignment: 'left',
            },
        },
    ],
}
```

There are four values supported:

- `left` moves nodes as far left as possible.
- `right` moves nodes as far right as possible.
- `center` moves nodes as close to the centre as possible.
- `justify` moves nodes as far left as possible, except for the last nodes, which are pushed right.

### Vertical Alignment

The vertical placement of the nodes can be customised using the `verticalAlignment` property on `node`.

#### Vertical alignment

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgFlowProportionChartOptions,
  AgSankeySeriesOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  SankeySeriesModule,
} from "ag-charts-enterprise";
import clone from "clone";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgFlowProportionChartOptions>({
    title: {
      text: "Company Revenue",
    },
    subtitle: {
      text: "2023",
    },
    data: [
      { from: "Employees", to: "Sales", size: 2 },
      { from: "Contractors", to: "Sales", size: 2 },
      { from: "Sales", to: "Revenue", size: 4 },
      { from: "Licenses", to: "Revenue", size: 4 },
      { from: "Revenue", to: "Cost of Sales", size: 1 },
      { from: "Revenue", to: "Profit", size: 7 },
      { from: "Profit", to: "Other Expenses", size: 2 },
      { from: "Profit", to: "Operational Profit", size: 5 },
      { from: "Operational Profit", to: "Shareholders", size: 3 },
      { from: "Operational Profit", to: "Employee Bonuses", size: 2 },
    ],
    series: [
      {
        type: "sankey",
        fromKey: "from",
        toKey: "to",
        sizeKey: "size",
        sizeName: "Total (USD millions)",
        node: {
          verticalAlignment: "center",
        },
      },
    ],
  });

  const verticalAlignTop = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).node!.verticalAlignment =
      "top";

    setOptions(nextOptions);
  };

  const verticalAlignBottom = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).node!.verticalAlignment =
      "bottom";

    setOptions(nextOptions);
  };

  const verticalAlignCenter = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).node!.verticalAlignment =
      "center";

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={verticalAlignTop}>
            <code>'top'</code>
          </button>
          <button onClick={verticalAlignBottom}>
            <code>'bottom'</code>
          </button>
          <button onClick={verticalAlignCenter}>
            <code>'center'</code>
          </button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Vertical alignment](https://www.ag-grid.com/charts/reactFunctionalTs/sankey-series/examples/vertical-alignment)

```js
{
    series: [
        {
            type: 'sankey',
            fromKey: 'from',
            toKey: 'to',
            sizeKey: 'size',
            node: {
                verticalAlignment: 'top',
            },
        },
    ],
}
```

There are three values supported:

- `top` moves nodes as far up as possible.
- `bottom` moves nodes as far down as possible.
- `center` places the nodes in the middle and distributes evenly in each direction.

### Sorting

The order of the nodes can be customised using the `sort` property on `node`.

#### Sorting

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgFlowProportionChartOptions,
  AgSankeySeriesOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  SankeySeriesModule,
} from "ag-charts-enterprise";
import clone from "clone";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgFlowProportionChartOptions>({
    title: {
      text: "Company Revenue",
    },
    subtitle: {
      text: "2023",
    },
    data: [
      { from: "Footwear", to: "North America", size: 2245 },
      { from: "Footwear", to: "Europe, Middle East & Africa", size: 1419 },
      { from: "Footwear", to: "Asia Pacific & Latin America", size: 879 },
      { from: "Footwear", to: "Greater China", size: 1022 },
      { from: "Apparel", to: "North America", size: 1405 },
      { from: "Apparel", to: "Asia Pacific & Latin America", size: 360 },
      { from: "Apparel", to: "Europe, Middle East & Africa", size: 794 },
      { from: "Apparel", to: "Greater China", size: 490 },
      { from: "Equipment", to: "North America", size: 132 },
      { from: "Equipment", to: "Europe, Middle East & Africa", size: 100 },
      { from: "Equipment", to: "Asia Pacific & Latin America", size: 59 },
      { from: "Equipment", to: "Greater China", size: 32 },
      { from: "North America", to: "NIKE Brand", size: 3782 },
      { from: "Europe, Middle East & Africa", to: "NIKE Brand", size: 2313 },
      { from: "Greater China", to: "NIKE Brand", size: 1544 },
      { from: "Asia Pacific & Latin America", to: "NIKE Brand", size: 1298 },
      { from: "Global Brand Divisions", to: "NIKE Brand", size: 9 },
      { from: "NIKE Brand", to: "Revenues", size: 8946 },
      { from: "Converse", to: "Revenues", size: 425 },
      { from: "Corporate", to: "Revenues", size: 3 },
      { from: "Revenues", to: "Cost of sales", size: 5269 },
      { from: "Revenues", to: "Gross profit", size: 4105 },
      {
        from: "Gross profit",
        to: "Selling and administrative expense",
        size: 3142,
      },
      { from: "Gross profit", to: "Interest expense", size: 14 },
      { from: "Gross profit", to: "Income before taxes", size: 949 },
      { from: "Other income", to: "Income before taxes", size: 48 },
      {
        from: "Selling and administrative expense",
        to: "Demand creation expense",
        size: 910,
      },
      {
        from: "Selling and administrative expense",
        to: "Operating overhead expense",
        size: 2232,
      },
      { from: "Income before taxes", to: "Tax expense", size: 150 },
      { from: "Income before taxes", to: "Net income", size: 847 },
    ],
    series: [
      {
        type: "sankey",
        fromKey: "from",
        toKey: "to",
        sizeKey: "size",
        sizeName: "Total (USD millions)",
        node: {
          alignment: "center",
          sort: "auto",
        },
      },
    ],
  });

  const sortData = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).node!.sort = "data";

    setOptions(nextOptions);
  };

  const sortAscending = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).node!.sort = "ascending";

    setOptions(nextOptions);
  };

  const sortDescending = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).node!.sort = "descending";

    setOptions(nextOptions);
  };

  const sortAuto = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).node!.sort = "auto";

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={sortData}>
            <code>'data'</code>
          </button>
          <button onClick={sortAscending}>
            <code>'ascending'</code>
          </button>
          <button onClick={sortDescending}>
            <code>'descending'</code>
          </button>
          <button onClick={sortAuto}>
            <code>'auto'</code>
          </button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Sorting](https://www.ag-grid.com/charts/reactFunctionalTs/sankey-series/examples/sorting)

There are three values supported:

- `data` sorts nodes in the same order as they first appear in the `data` array.
- `ascending` and `descending` sort nodes alphanumerically by their displayed labels.
- `auto` sorts nodes to reduce overlapping links and produce a cleaner layout.

## Label Placement

Labels can be placed to the left, right or centred over nodes using the `placement` property.

#### Label Placement

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgFlowProportionChartOptions,
  AgSankeySeriesOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  SankeySeriesModule,
} from "ag-charts-enterprise";
import clone from "clone";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgFlowProportionChartOptions>({
    title: {
      text: "Company Revenue",
    },
    subtitle: {
      text: "2023",
    },
    data: [
      { from: "Employees", to: "Sales", size: 2 },
      { from: "Contractors", to: "Sales", size: 2 },
      { from: "Sales", to: "Revenue", size: 4 },
      { from: "Licenses", to: "Revenue", size: 4 },
      { from: "Revenue", to: "Cost of Sales", size: 1 },
      { from: "Revenue", to: "Profit", size: 7 },
      { from: "Profit", to: "Other Expenses", size: 2 },
      { from: "Profit", to: "Operational Profit", size: 5 },
      { from: "Operational Profit", to: "Shareholders", size: 3 },
      { from: "Operational Profit", to: "Employee Bonuses", size: 2 },
    ],
    series: [
      {
        type: "sankey",
        fromKey: "from",
        toKey: "to",
        sizeKey: "size",
        sizeName: "Total (USD millions)",
        label: {
          placement: "right",
          edgePlacement: "outside",
        },
      },
    ],
  });

  const placeLeft = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).label!.placement = "left";

    setOptions(nextOptions);
  };

  const placeRight = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).label!.placement =
      "right";

    setOptions(nextOptions);
  };

  const placeCenter = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).label!.placement =
      "center";

    setOptions(nextOptions);
  };

  const placeEdgeInside = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).label!.edgePlacement =
      "inside";

    setOptions(nextOptions);
  };

  const placeEdgeOutside = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).label!.edgePlacement =
      "outside";

    setOptions(nextOptions);
  };

  const placeEdgeDefault = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgSankeySeriesOptions).label!.edgePlacement =
      undefined;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <span> Placement: </span>
          <button onClick={placeLeft}>
            <code>'left'</code>
          </button>
          <button onClick={placeRight}>
            <code>'right'</code>
          </button>
          <button onClick={placeCenter} className="gap-right">
            <code>'center'</code>
          </button>
          <span> Edge Placement: </span>
          <button onClick={placeEdgeOutside}>
            <code>'outside'</code>
          </button>
          <button onClick={placeEdgeInside}>
            <code>'inside'</code>
          </button>
          <button onClick={placeEdgeDefault}>
            <code>undefined</code>
          </button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Label Placement](https://www.ag-grid.com/charts/reactFunctionalTs/sankey-series/examples/label-placement)

The optional `edgePlacement` property sets the first and last node labels to `'inside'` or `'outside'`, defaulting to the `placement` value if unspecified.

## Customisation

### Node Style

#### Node Style

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  SankeySeriesModule,
} from "ag-charts-enterprise";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "UK Power Generation",
    },
    subtitle: {
      text: "2023",
    },
    data: [
      { from: "Wind", to: "Renewables", size: 79 },
      { from: "Nuclear", to: "Renewables", size: 38 },
      { from: "Biomass", to: "Renewables", size: 14 },
      { from: "Solar", to: "Renewables", size: 13 },
      { from: "Hydro", to: "Renewables", size: 3 },
      { from: "Natural Gas", to: "Fossil Fuels", size: 86 },
      { from: "Coal", to: "Fossil Fuels", size: 3 },
      { from: "Imports", to: "Total", size: 33 },
      { from: "Fossil Fuels", to: "Total", size: 89 },
      { from: "Renewables", to: "Total", size: 147 },
    ],
    series: [
      {
        type: "sankey",
        fromKey: "from",
        toKey: "to",
        sizeKey: "size",
        sizeName: "Total (GWh)",
        node: {
          fill: "#34495e",
          stroke: "#2c3e50",
          strokeWidth: 2,
        },
      },
    ],
  });

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

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

[Live example: Node Style](https://www.ag-grid.com/charts/reactFunctionalTs/sankey-series/examples/node-style)

The styling of all nodes can be customised using the `node` property.

```js
{
    series: [
        {
            type: 'sankey',
            fromKey: 'from',
            toKey: 'to',
            sizeKey: 'size',
            node: {
                fill: '#34495e',
                stroke: '#2c3e50',
                strokeWidth: 2,
            },
        },
    ],
}
```

### Link Style

#### Link Style

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  SankeySeriesModule,
} from "ag-charts-enterprise";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "UK Power Generation",
    },
    subtitle: {
      text: "2023",
    },
    data: [
      { from: "Wind", to: "Renewables", size: 79 },
      { from: "Nuclear", to: "Renewables", size: 38 },
      { from: "Biomass", to: "Renewables", size: 14 },
      { from: "Solar", to: "Renewables", size: 13 },
      { from: "Hydro", to: "Renewables", size: 3 },
      { from: "Natural Gas", to: "Fossil Fuels", size: 86 },
      { from: "Coal", to: "Fossil Fuels", size: 3 },
      { from: "Imports", to: "Total", size: 33 },
      { from: "Fossil Fuels", to: "Total", size: 89 },
      { from: "Renewables", to: "Total", size: 147 },
    ],
    series: [
      {
        type: "sankey",
        fromKey: "from",
        toKey: "to",
        sizeKey: "size",
        sizeName: "Total (GWh)",
        link: {
          fill: "#34495e",
          fillOpacity: 0.25,
          stroke: "#2c3e50",
          strokeWidth: 1,
          strokeOpacity: 0.25,
        },
      },
    ],
  });

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

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

[Live example: Link Style](https://www.ag-grid.com/charts/reactFunctionalTs/sankey-series/examples/link-style)

The styling of all links can be customised using the `link` property.

```js
{
    series: [
        {
            type: 'sankey',
            fromKey: 'from',
            toKey: 'to',
            sizeKey: 'size',
            link: {
                fill: '#34495e',
                fillOpacity: 0.25,
                stroke: '#2c3e50',
                strokeWidth: 1,
                strokeOpacity: 0.25,
            },
        },
    ],
}
```

## API Reference

#### Sankey Series

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'sankey' |  | Configuration for the Sankey Series. |
| getItemId | Function |  | A callback to provide a stable identifier for each node, exposed as `itemId` in events and active state.  The returned identifier must be unique across nodes and links, which share one `itemId` namespace (links default to `link-<index>`).  If not supplied, the node name is used as its identifier. |
| 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. |
| highlight | AgHighlightOptions |  | Configuration for highlighting when a series or legend item is hovered over. |
| 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. |
| 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. |
| fromKey | string |  | The key containing the start node of each link. |
| toKey | string |  | The key containing the end node of each link. |
| sizeKey | string |  | The key containing the size of each link. |
| 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. |
| label | AgSankeySeriesLabelOptions |  | Options for the label for each node. |
| label.spacing | PixelSize |  | Spacing between a node and its label. |
| label.placement | 'left' \| 'right' \| 'center' |  | Placement of a label relative to its node. |
| label.edgePlacement | 'inside' \| 'outside' |  | Placement of an edge label relative to its node. |
| 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. |
| fills | Array<CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill> |  | The colours to cycle through for the fills of the nodes and links. 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 nodes and links. |
| link | AgSankeySeriesLinkOptions |  | Options for the links. |
| link.itemStyler | Styler |  | Function used to return formatting for individual links, based on the given parameters. |
| link.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. |
| link.fillOpacity | Opacity |  | The opacity of the fill colour. |
| link.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| link.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| link.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| link.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| link.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| node | AgSankeySeriesNodeOptions |  | Options for the nodes. |
| node.spacing | PixelSize | 20 | Spacing between the nodes. |
| node.minSpacing | PixelSize | 0 | Minimum spacing between the nodes when the series area is reduced in height. |
| node.width | PixelSize | 1 | Width of the nodes. |
| node.alignment | 'left' \| 'right' \| 'center' \| 'justify' | 'justify' | Alignment of the nodes. |
| node.verticalAlignment | 'top' \| 'bottom' \| 'center' | 'center' | Vertical alignment of the nodes. |
| node.sort | 'data' \| 'ascending' \| 'descending' \| 'auto' | 'auto' | Sorting method of the nodes. |
| node.itemStyler | Styler |  | Function used to return formatting for individual nodes, based on the given parameters. |
| node.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. |
| node.fillOpacity | Opacity |  | The opacity of the fill colour. |
| node.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| node.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| node.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| node.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| node.lineDashOffset | PixelSize |  | The initial offset of the dashed line 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. |