> Markdown version of [Funnel & Pyramid](https://vaadin.com/docs/next/components/charts/charttypes/funnel-and-pyramid). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# <a id="charts.charttypes.funnel"></a>Funnel & Pyramid Charts

Funnel and pyramid charts are typically used to visualize stages in a sales process, and for other purposes to visualize subsets of diminishing size. A funnel or pyramid chart has layers much like a stacked column: in funnel, from top to bottom and, in pyramid, from bottom to top. The top of the funnel has the width of the drawing area of the chart, and diminishes in size down to a funnel "neck" that continues as a column to the bottom. A pyramid diminishes from bottom to top and doesn’t have a neck.

[Image: charts funnel]

Funnel & Pyramid Charts

Funnels have chart type `FUNNEL`, pyramids have `PYRAMID`.

The labels of the funnel blocks are by default placed on the right side of the blocks, together with a connector. See the following example.

```java
Chart chart = new Chart(ChartType.FUNNEL);
chart.setWidth("500px");
chart.setHeight("350px");

// Modify the default configuration a bit
Configuration conf = chart.getConfiguration();
conf.setTitle("Monster Utilization");
conf.getLegend().setEnabled(false);

// Give more room for the labels
conf.getChart().setSpacingRight(120);

// Configure the funnel neck shape
PlotOptionsFunnel options = new PlotOptionsFunnel();
options.setNeckHeight(20, Sizeable.Unit.PERCENTAGE);
options.setNeckWidth(20, Sizeable.Unit.PERCENTAGE);

// Style the data labels
DataLabelsFunnel dataLabels = new DataLabelsFunnel();
dataLabels.setFormat("<b>{point.name}</b> ({point.y:,.0f})");
dataLabels.setSoftConnector(false);
dataLabels.setColor(SolidColor.BLACK);
options.setDataLabels(dataLabels);

conf.setPlotOptions(options);

// Create the range series
DataSeries series = new DataSeries();
series.add(new DataSeriesItem("Monsters Met", 340));
series.add(new DataSeriesItem("Engaged", 235));
series.add(new DataSeriesItem("Killed", 187));
series.add(new DataSeriesItem("Tinned", 70));
series.add(new DataSeriesItem("Eaten", 55));
conf.addSeries(series);
```

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

The funnel and pyramid options are configured with `PlotOptionsFunnel` and `PlotOptionsFunnel`, respectively.

On top of the common chart options, the chart types support the following shared options: `width`, `height`, `depth`, `allowPointSelect`, `borderColor`, `borderWidth`, `center`, `slicedOffset`, and `visible`. See ["Plot Options"](https://vaadin.com/docs/next/components/charts/configuration.md#charts.configuration.plotoptions) for detailed descriptions.

They have the following chart-type-specific properties:

- ``neckHeight`or[parameter]`neckHeightPercentage`` (only funnel)

  Height of the neck part of the funnel, either as pixels or as a percentage of the entire funnel height.

- ``neckWidth`or[parameter]`neckWidthPercentage`` (only funnel)

  Width of the neck part of the funnel, either as pixels or as percentage of the top of the funnel.

- `reversed`

  Whether the chart is inverted from the normal direction, diminishing from the top to bottom. The default is *false* for funnel and *true* for pyramid.

## <a id="funnel-example"></a>Funnel Example

**Flow** — `ChartTypeFunnel.java`

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

Configuration conf = chart.getConfiguration();
conf.setTitle("Sales funnel");
conf.getLegend().setEnabled(false);

PlotOptionsFunnel options = new PlotOptionsFunnel();
options.setReversed(false);
options.setNeckWidth("30%");
options.setNeckHeight("30%");

options.setWidth("70%");

DataLabelsFunnel dataLabels = new DataLabelsFunnel();
dataLabels.setFormat("<b>{point.name}</b> ({point.y:,.0f})");
options.setDataLabels(dataLabels);

DataSeries dataSeries = new DataSeries("Unique users");
dataSeries.add(new DataSeriesItem("Website visits", 15654));
dataSeries.add(new DataSeriesItem("Downloads", 4064));
dataSeries.add(new DataSeriesItem("Requested price list", 1987));
dataSeries.add(new DataSeriesItem("Invoice sent", 976));
dataSeries.add(new DataSeriesItem("Finalized", 846));

dataSeries.setPlotOptions(options);
conf.addSeries(dataSeries);
```

## <a id="pyramid-example"></a>Pyramid Example

**Flow** — `ChartTypePyramid.java`

```java
Chart chart = new Chart(ChartType.PYRAMID);
Configuration configuration = chart.getConfiguration();

configuration.setTitle("Sales pyramid");
configuration.getLegend().setEnabled(false);

PlotOptionsPyramid plotOptionsSeries = new PlotOptionsPyramid();
DataLabelsFunnel dataLabels = plotOptionsSeries.getDataLabels();
dataLabels.setEnabled(true);
dataLabels.setSoftConnector(true);
dataLabels.setFormat("<b>{point.name}</b> ({point.y:,.0f})");

plotOptionsSeries.setCenter("40%", "50%");
plotOptionsSeries.setWidth("60%");

configuration.setPlotOptions(plotOptionsSeries);

DataSeries series = new DataSeries("Unique users");

series.add(new DataSeriesItem("Website visits", 15654));
series.add(new DataSeriesItem("Downloads", 4064));
series.add(new DataSeriesItem("Requested price list", 1987));
series.add(new DataSeriesItem("Invoice sent", 976));
series.add(new DataSeriesItem("Finalized", 846));

configuration.addSeries(series);
```