> Markdown version of [Sankey](https://vaadin.com/docs/next/components/charts/charttypes/sankey). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# <a id="charts.charttypes.sankey"></a>Sankey Charts

Sankey charts visualize how quantities flow from one set of nodes to another. Each link between two nodes is drawn with a width proportional to its weight, which makes it easy to see where the volume in a process is concentrated and where it’s lost.

A Sankey chart is enabled with `ChartType.SANKEY`. You can make type-specific settings in the `PlotOptionsSankey` object, as described later.

```java
Chart chart = new Chart(ChartType.SANKEY);
Configuration conf = chart.getConfiguration();
conf.setTitle("Website Visitors");
...
```

[Sankey Chart](#figure.charts.charttypes.sankey) shows a configured Sankey chart.

[Image: charts sankey]

Sankey Chart

## <a id="charts.charttypes.sankey.data"></a>Data Model

The links of a Sankey chart are defined with `DataSeriesItemSankey` items added to a regular `DataSeries`. Each item has a `from` node, a `to` node, and a `weight`. The nodes themselves aren’t declared separately: they are created from the names used in the links.

```java
DataSeries series = new DataSeries("Visitors");
series.add(new DataSeriesItemSankey("Search", "Landing Page", 850));
series.add(new DataSeriesItemSankey("Social", "Landing Page", 420));
series.add(new DataSeriesItemSankey("Landing Page", "Sign-Up", 480));
series.add(new DataSeriesItemSankey("Landing Page", "Bounce", 1100));
conf.addSeries(series);
```

The nodes are laid out in columns based on the links: a node is placed in the column following the nodes that link to it. The links must not form a loop, since the nodes couldn’t then be arranged into columns.

Since `DataSeriesItemSankey` extends `DataSeriesItem`, you can also configure a single link — for example, its color or its data labels:

```java
DataSeriesItemSankey item = new DataSeriesItemSankey("Search", "Blog", 640);
item.setColor(new SolidColor("#007ad0"));
series.add(item);
```

If you need to configure the nodes rather than the links — to set the color of a node or to place it in a specific column, for instance — use a `NodeSeries` instead. Add `Node` instances to it with `NodeSeries.add(nodeFrom, nodeTo)`, and set the weight on the returned `NodeSeriesItem`.

```java
NodeSeries series = new NodeSeries();
Node search = new Node("Search");
Node landingPage = new Node("Landing Page");
landingPage.setColor(new SolidColor("#007ad0"));

series.add(search, landingPage).setWeight(850);
conf.addSeries(series);
```

## <a id="charts.charttypes.sankey.plotoptions"></a>Plot Options

The chart-specific options of a Sankey chart are configured with a `PlotOptionsSankey`.

```java
PlotOptionsSankey plotOptions = new PlotOptionsSankey();
plotOptions.setCurveFactor(0.5);
plotOptions.setNodeWidth(16);
plotOptions.setNodePadding(12);
plotOptions.setLinkOpacity(0.3);
conf.setPlotOptions(plotOptions);
```

On top of the common chart options, a Sankey chart supports the following chart-type-specific properties:

- `curveFactor`

  How curved the links are. A value of *0* draws them as straight lines. The default is *0.33*.

- `nodeWidth`

  The width of each node in pixels, or its height if the chart is inverted. The default is *20*.

- `nodePadding`

  The vertical padding between the nodes of a column, in pixels. If the nodes don’t fit in the plot area with the given padding, a smaller padding is used instead.

- `linkOpacity`

  The opacity of the links between the nodes. The default is *0.5*.

- `minLinkWidth`

  The minimum width of a link, in pixels. By default, links with a weight of *0* aren’t shown.

Data labels show the names of the nodes. Configure them through the plot options for the whole series, or on an individual `DataSeriesItemSankey` to label a single link:

```java
DataLabels dataLabels = new DataLabels();
dataLabels.setEnabled(true);
plotOptions.setDataLabels(dataLabels);
```

## <a id="sankey-example"></a>Sankey Example

**Flow** — `ChartTypeSankey.java`

```java
Chart chart = new Chart(ChartType.SANKEY);

Configuration conf = chart.getConfiguration();
conf.setTitle("Website Visitors");
conf.setSubTitle("From acquisition channel to outcome");

DataSeries series = new DataSeries("Visitors");
series.add(new DataSeriesItemSankey("Search", "Landing Page", 850));
series.add(new DataSeriesItemSankey("Social", "Landing Page", 420));
series.add(new DataSeriesItemSankey("Email", "Landing Page", 310));
series.add(new DataSeriesItemSankey("Search", "Blog", 640));
series.add(new DataSeriesItemSankey("Social", "Blog", 520));

series.add(new DataSeriesItemSankey("Landing Page", "Sign-Up", 480));
series.add(new DataSeriesItemSankey("Landing Page", "Bounce", 1100));
series.add(new DataSeriesItemSankey("Blog", "Sign-Up", 240));
series.add(new DataSeriesItemSankey("Blog", "Bounce", 920));

series.add(new DataSeriesItemSankey("Sign-Up", "Trial", 520));
series.add(new DataSeriesItemSankey("Sign-Up", "Newsletter", 200));

conf.addSeries(series);

PlotOptionsSankey plotOptions = new PlotOptionsSankey();
plotOptions.setCurveFactor(0.5);
plotOptions.setNodeWidth(16);
plotOptions.setNodePadding(12);

DataLabels dataLabels = new DataLabels();
dataLabels.setEnabled(true);
plotOptions.setDataLabels(dataLabels);

conf.setPlotOptions(plotOptions);
```