docs: add the funnel chart type page #11619
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| --- | ||
| title: Funnel | ||
| description: Show how a value narrows from stage to stage, such as signup → activation → purchase. | ||
| --- | ||
|
|
||
| Funnel charts draw one bar per stage, centered on a shared midline, with a connector between each adjacent pair of stages. Each bar's width is proportional to its stage's value, so the figure narrows wherever values drop. Best for stage-to-stage conversion: how many users, orders, or events survive each step of a process. | ||
|
|
||
| {/* Screenshot: funnel chart — order counts across four statuses, with stage names and values on the bars and conversion percentages on the connectors. Place directly below this paragraph, full width. (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */} | ||
|
|
||
| ## Fields | ||
|
|
||
| A funnel needs exactly two fields, picked on the Fields tab: | ||
|
|
||
| - **Stage** — a dimension (a time dimension works too, bucketed by its grain). Each distinct value becomes one stage. | ||
| - **Value** — a measure. It is rolled up per stage, so a result with extra columns still draws one bar per stage. | ||
|
|
||
| {/* Screenshot: Fields tab with the Stage and Value selectors bound. Place inline, 50% width, right-aligned. (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */} | ||
|
|
||
| Stages keep the order your query returned them in. To reorder stages, adjust the sort in the results table — a stage that grows partway down is real data (re-entry, late-arriving events), so the chart never sorts it away for you. | ||
|
|
||
| A stage whose value is zero still draws, as a thin line in its stage color, so a gap in the data reads as a zero rather than as a missing stage. | ||
|
|
||
| ## Conversion percentages | ||
|
|
||
| The connectors between stages carry the funnel's percentages. Two independent toggles in the **Data labels** section of the Style tab control them: | ||
|
|
||
| - **First** — each stage as a share of the first stage, drawn as `36% of first`. On by default. | ||
| - **Prev** — each stage as a share of the stage before it, drawn as `20% of previous`. | ||
|
|
||
| Turning both on stacks the two lines on each connector; turning both off leaves the connectors unlabeled. Whichever you select also appears in the tooltip, alongside the stage and value. | ||
|
|
||
| {/* Screenshot: Style tab Data labels section with the First and Prev toggles. Place inline, 50% width, right-aligned. (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */} | ||
|
|
||
| ## Data labels | ||
|
|
||
| Each bar carries its stage name and value, both on by default and toggled in the **Data labels** section of the Style tab. The value's number format has its own picker, and one font size governs every label the funnel draws — the bar labels and the connector percentages alike. | ||
|
|
||
| Labels always sit at the bar's center. When a bar is too narrow to hold its label, the text switches from white to a dark color so it stays readable against the page background. | ||
|
|
||
| ## Color | ||
|
|
||
| Each stage takes its own color from the palette selected in the **Palette** dropdown on the Style tab, in palette order. See [Palettes](/docs/explore-analyze/charts/configuration/color-and-stacking#palettes) for the built-in palettes and how to define a custom one. | ||
|
Contributor
There was a problem hiding this comment. The One leftover from the previous round: that page's scope sentence ( |
||
|
|
||
| {/* Screenshot: Style tab with the Palette dropdown open, showing the built-in discrete palettes. Place inline, 50% width, right-aligned. (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */} | ||
|
|
||
| ## Legend | ||
|
|
||
| A legend naming each stage in its palette color is available in the **Legend** section of the Style tab, along with its placement. | ||
|
Contributor
There was a problem hiding this comment. Two notes on the new Legend section:
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit / opportunity: the repo already has
recipes/data-modeling/funnels.mdx— "Implementing funnel analysis" with the packagedFunnelshelper. That recipe produces exactly thestep+conversionsshape this chart consumes, so a one-line pointer here (and ideally a link back from the recipe) would make the modeling → visualization path discoverable. Something like: "To model the stages themselves, see Implementing funnel analysis."Separately, that recipe doesn't appear in
docs.jsonat all (grep -i funnel docs.jsonmatches only the new chart page), so it may be unreachable from the sidebar. Out of scope for this PR, but worth a follow-up.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Skipping this one.
recipes/data-modeling/funnels.mdxishidden: truein its frontmatter, so its absence from docs.json is deliberate rather than an oversight, and linking it from a listed page would surface it against that. Worth revisiting if the recipe is ever unhidden.