Improve funnel layout by sanne-san · Pull Request #6603 · plausible/analytics

sanne-san · 2026-08-18T06:28:05Z

Changes

Rebuild the funnel report as a React component with CSS bars, replacing the old Chart.js canvas and its hover-only tooltip
Give every step its own card and bar, labelled with the visitors who continued and the visitors who dropped off
Align the funnel header with the Explore header.
Add strict or flexible to the funnel header, indicating whether the funnel must be followed in order or not.
Scroll longer funnels horizontally, four steps at a time
Show step placeholders while loading, and one short message when a funnel cannot be shown
Drop the chartjs-plugin-datalabels dependency

Tests

Automated tests have been added

Changelog

Entry has been added to changelog

Documentation

Docs have been updated

Dark mode

The UI has been tested both in dark and light mode

- Rebuild the funnel report as a React component with CSS bars, replacing the old Chart.js canvas and its hover-only tooltip - Give every step its own card and bar, labelled with the visitors who continued and the visitors who dropped off - Align the funnel header with the Explore header. - Add `strict` or `flexible` to the funnel header, indicating whether the funnel must be followed in order or not. - Scroll longer funnels horizontally, four steps at a time - Show step placeholders while loading, and one short message when a funnel cannot be shown - Drop the chartjs-plugin-datalabels dependency

github-actions · 2026-08-18T06:28:22Z

Preview environment👷🏼‍♀️🏗️
PR-6603

aerosol · 2026-08-18T09:05:48Z

Not even a suggestion, just something that made me pause.

Question: should these

correspond somehow visually with:

Maybe color-wise?

Also, just double checking if we want to present detailed number in two places:

As opposed to saying "3K" somewhere for example.

- Remove bordered boxes and replace with a simpler layout - Draw a gray bar with the height of the previous step behind each step, to visually indicate the dropoff - Move the step outcomes to a small box in the bottom right corner that grows on hover, focus or touch to show the full text and visitor counts - Replace the manual fetch effect with react-query - Remove the unused chart.js dependency - Cover the strict order flag and the outcome box in the tests

- Remove the dropped off rate from the first step - Fix z-index issues - Change `→` and `↓` text color to gray

sanne-san · 2026-08-24T12:27:42Z

Not even a suggestion, just something that made me pause.

Question: should these
correspond somehow visually with: Maybe color-wise?

They are more similar in the current iteration! Not entirely the same though because I think the caps should be reserved for the labels at the top of the report.

sanne-san added the preview label Aug 18, 2026