Docs

Documentation versions (currently viewingVaadin 25.3 (pre-release))

Funnel & Pyramid Charts

Charts that visualize stages of a process as layers of diminishing size.

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.

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.

Source code
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);

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" 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.

Funnel Example

Source code
ChartTypeFunnel.java

Pyramid Example

Source code
ChartTypePyramid.java