☰

Funnel Chart

A funnel chart is a data visualization tool that represents the progressive reduction of data as it moves through different stages of a process. Funnel charts assist with recognizing possible bottlenecks in the conversion process, highlight areas for improvement, and provide insights into the effectiveness of marketing or sales efforts at each stage.

Chart Configuration

You need to set certain options under plotOptions to make a funnel/pyramid chart.


chart: {
  type: 'bar',
},
plotOptions: {
  bar: {
    horizontal: true,
    isFunnel: true,
  },
},

Data Format

The data format for a funnel chart is the same as for the other XY charts. You need to provide your data in the series array in chart options. Please note that you will have to manually sort the series array either in ascending or descending order based on whether you want to plot a funnel or a pyramid chart.

Basic Funnel Chart

Creating a funnel chart is no different than creating a horizontal bar chart. As stated above, you only need to tweak a few configurations, rest everything stays same. Please


chart: {
  type: 'bar',
  height: 350,
},
plotOptions: {
  bar: {
    horizontal: true,
    isFunnel: true,
  },
},
series: [
  {
    name: "Funnel Series",
    data: [
      {
        x: "Sourced",
        y: 138
      },
      {
        x: "Assessed",
        y: 99
      },
      {
        x: "Technical",
        y: 75
      },
      {
        x: "Offered",
        y: 30
      },
    ],
  },
]

funnel chart

Pyramid Chart

To create a pyramid chart (which is technically an inversed funnel chart), you can just reverse the series array in the above code and you will get a pyramid chart. No other changes required in the configuration. pyramid chart