PlotSet LogoPlotSet

How to Create a Funnel Chart

A step by step walkthrough for turning a stage-by-stage spreadsheet into a published funnel chart in PlotSet, from ordering the rows to exporting or embedding the result.

Unos 7 minutos

Applicants to hires, visitors to purchasers, leads to closed deals: how to create a funnel chart in PlotSet works the same way regardless of which stage counts are narrowing. You will upload the sheet, get the stage order right, label the drop-off between bands, and either publish a live embed or export a static image for a deck.

If your data is already two columns, stage and count, in the right order, this takes about five minutes. Add a couple more if you need to reconcile counts that came from different reports, since a funnel only works when each stage is genuinely a subset of the one before it. Budget the seven minutes below and treat the rest as buffer for that cleanup.

Los datos que necesitas

Two columns, one row per stage, already sorted in process order: the stage name first, the count still remaining second. No totals row, one header row.

CSV de ejemplo
StageCount
Visited Pricing Page18400
Started Trial4120
Activated Account2380
Added Payment Method910
Became Paying Customer640
Notas

Row order is chart order. PlotSet draws the bands top to bottom in the order they appear in the file, so sort your rows by process stage before uploading, not by count.

Every stage must be a subset of the one above it. If some paying customers never technically "started a trial" in your tracking, the counts will not nest cleanly and the chart will misrepresent the process. Fix the definitions in the source data first.

Keep it to three to six stages. Below three you just have a conversion rate, and past six the bands get too thin to label.

The count column must decrease (or stay flat) from row to row. A stage that goes back up usually means two different metrics got mixed into one column, for example a raw pageview count sitting above a deduplicated visitor count.

Los pasos

El camino exacto en PlotSet, desde una plantilla en blanco hasta el gráfico terminado.

  1. 01

    Open the funnel chart template

    From the PlotSet dashboard, start a new project and choose the Funnel Chart template. It loads with sample stages already bound to the columns, so you can see the two-column shape before touching your own file.

    El selector de plantillas de PlotSet: las categorías de gráficos en la columna izquierda, la cuadrícula Bar Charts abierta y la tarjeta de la plantilla Bar Chart con su botón Select visible.
    Todas las guías empiezan aquí. Elige la categoría y luego la plantilla. Es la misma cuadrícula sea cual sea el tipo de gráfico que busques.
  2. 02

    Order your rows by stage, not by count

    In your spreadsheet, put the first stage of the process in row one and work down to the last. This is the step people skip, and it is the one PlotSet has no way to guess for you: nothing about the numbers themselves tells the chart which stage came first.

  3. 03

    Bring in the sheet or connect it live

    Import a CSV or .xlsx file from the data panel, paste rows directly from a spreadsheet, or connect a Google Sheet if the counts get refreshed on a schedule and you want the chart to update with them.

    La vista de datos del editor de PlotSet: una hoja de cálculo con las columnas Name, Value y Region llenas de cifras de provincias canadienses, junto al panel Data, que ofrece subida de CSV, Magic Import y sincronización con Google Sheet.
    La vista de datos, aquí en un proyecto de gráfico de barras. Sube un CSV, saca los números de una imagen con Magic Import o sincroniza una Google Sheet. El panel es el mismo en todos los tipos de gráfico.
  4. 04

    Map the stage and value columns

    Confirm which column feeds the stage labels and which feeds the band width. PlotSet usually gets this right from clear headers like "Stage" and "Count", but check it if your sheet carries extra columns it might have guessed wrong on.

    El panel de datos de PlotSet con las asignaciones de columnas resaltadas: Label/time apuntando a la columna A, Values a la columna B y Filter/color a la columna C, con el botón Auto Binding debajo.
    Las asignaciones deciden qué columna se convierte en la etiqueta, cuál aporta los valores y cuál define el color. Auto Binding las deduce de tus encabezados, así que revísalas en lugar de darlas por buenas.
  5. 05

    Turn on stage-to-stage conversion labels

    Switch on the label option that shows the percentage carried over from the previous stage, not just the raw count at each one. The count alone tells you the size of each stage; the conversion percentage tells you where the process is actually losing people.

  6. 06

    Style the bands

    A single colour, darkening slightly from top to bottom, reads as one continuous process rather than a set of unrelated categories. Reserve a second, contrasting colour for the one stage you want the reader to notice, usually the biggest drop.

    El editor de PlotSet en la pestaña Preview: un gráfico de tipo Funnel Chart ya terminado en el lienzo y, a la derecha, el panel de ajustes rodeado por un recuadro rojo.
    La pestaña Preview de un gráfico de tipo Funnel Chart. Todos los controles de estilo están en el panel enmarcado: apariencia, encabezado, pie de página y las opciones propias de este tipo de gráfico, cada grupo en su propia pestaña.
  7. 07

    Title the chart around the finding

    "Trial signup funnel" describes the data; "Most trials drop off before adding a payment method" states the finding. Put the second kind of title on the chart and let the bands back it up.

  8. 08

    Publish, embed or export the funnel

    Publish for a live interactive chart where hovering a band shows its exact count and conversion rate, grab the embed code for a page, or export a PNG, SVG or PDF for a slide or report.

Empieza con la plantilla de Funnel Chart, que ya trae datos de ejemplo cargados, y sustitúyelos por los tuyos.

Abrir la plantilla

Publícalo, incrústalo o expórtalo

El último tramo es igual en todos los tipos de gráfico: Share convierte el gráfico en un enlace público en vivo y un código de incrustación, y Export lo guarda como un archivo estático.

Share: enlace público y código de incrustación

Al activar el código de incrustación y el enlace público, el gráfico queda publicado. El enlace se lo puedes enviar a cualquiera sin problema, y el código de incrustación se coloca en cualquier página como un iframe que conserva los tooltips al pasar el cursor y toda la interactividad. Si editas el gráfico más adelante, haz clic en Recreate para llevar esos cambios a ambos.

La barra de herramientas del editor de PlotSet con el botón Share resaltado, justo al lado del botón Export.
Share es lo que convierte un gráfico terminado en un enlace público y un código de incrustación.
El diálogo Share de PlotSet: el interruptor que activa el código de incrustación y el enlace público, los botones Link, Embed, Facebook, Reddit, Twitter, LinkedIn y Email, y el enlace público del gráfico con un botón Copy.
Activa el código de incrustación y el enlace público, y después copia el enlace o llévate el iframe. Recreate envía las ediciones posteriores a todos los que ya lo tengan.

Export: SVG, PNG o JPG

Export guarda una copia estática en el tamaño que necesites. El SVG se mantiene nítido a cualquier escala y se puede seguir editando en una herramienta de diseño; PNG y JPG son la opción segura para diapositivas y documentos. El multiplicador de escala es lo que te da una imagen nítida en una pantalla retina.

La barra de herramientas del editor de PlotSet con el botón Export resaltado.
Export es el camino hacia un archivo estático para una diapositiva o un informe.
El diálogo Export chart de PlotSet: un selector de escala en 2x, los campos de ancho y alto fijados en 1000 por 600, y el menú de formato abierto con SVG, PNG y JPG.
El SVG se mantiene nítido a cualquier tamaño y se puede seguir editando en una herramienta de diseño; PNG y JPG son la apuesta segura para una presentación. Ajusta la escala antes de exportar para que la imagen se vea nítida en una pantalla retina.

Consejos de estilo para un Funnel Chart

Label the drop-off between bands, not just each band

A funnel chart with only the count at each stage asks the reader to do subtraction in their head. Show the amount or percentage lost between consecutive stages directly on the taper, so the worst step is visible without any arithmetic.

Keep the taper, skip the 3D effect

Some tools offer a beveled or 3D-shaded funnel. It looks like a decoration from a slide template and makes the band widths harder to compare accurately. A flat funnel with straight taper edges reads faster and measures better.

Order stages by process, never by size

It is tempting to sort by count when a report happens to come out that way, but a funnel's row order is read as "what happens first," not "what is largest." If two stages could ever swap order and still make sense, they do not belong in the same funnel.

Match colour intensity to stage, not to value

A single hue that gets slightly darker toward the bottom mirrors the shrinking shape and needs no legend. Colouring bands by their count instead just repeats information the width already shows.

Errores comunes al hacer un Funnel Chart

The bands are not actually narrowing in order

This almost always means the rows were sorted by count, alphabetically, or by whatever order they came out of a report, not by the order the stages happen in. Re-sort the source rows by process stage in the spreadsheet and re-upload; PlotSet renders top to bottom in row order and cannot infer the process for you.

One band is wider than the stage above it

A later stage cannot legitimately have more people than an earlier one in a true funnel, so this points to two different counting methods getting mixed together, for example a session count above a unique-user count. Check how each number was produced and make sure every stage counts the same population, just filtered further.

The chart has too many thin, unreadable bands

Past about six stages, minor sub-steps crowd out the ones that matter and every band gets too thin to label. Group the intermediate steps into the handful of stages someone could realistically act on, and move the finer breakdown into a table alongside the chart.

Aprende más sobre el Funnel Chart

¿No estás seguro de que el Funnel Chart sea la opción correcta? Descubre qué es, cuándo usarlo y cuándo no.

Sobre el Funnel Chart

Funnel Chart: preguntas frecuentes

Two columns and one header row, with the stage name in the first column and the count remaining at that stage in the second. Rows must already be sorted in process order, since PlotSet draws bands top to bottom in the order they appear in the file.

Crea tu Funnel Chart ahora

Gratis para empezar con más de 300 plantillas. No se necesita tarjeta de crédito.