Funnel Chart Examples

Visualize conversion funnels and process flows

Basic Sales Funnel

A funnel chart with automatic cool-to-warm color gradient:

Sales Conversion Funnel

<dc-funnel-chart width="600" height="500">
  <dc-title>Sales Conversion Funnel</dc-title>
  <dc-funnel-stage value="10000" label="Website Visitors"></dc-funnel-stage>
  <dc-funnel-stage value="5000" label="Product Views"></dc-funnel-stage>
  <dc-funnel-stage value="2000" label="Add to Cart"></dc-funnel-stage>
  <dc-funnel-stage value="1000" label="Checkout Started"></dc-funnel-stage>
  <dc-funnel-stage value="750" label="Purchases"></dc-funnel-stage>
</dc-funnel-chart>
Sales Conversion Funnel

Control of Narrowing

Control how dramatically the funnel narrows using the funnel-factor attribute. Positive values create standard funnels (wide to narrow), negative values create inverted funnels (narrow to wide):

Default Narrowing (70%)

<dc-funnel-chart width="450" height="400">
  <dc-title>Standard Funnel</dc-title>
  <dc-funnel-stage value="5000" label="Stage 1"></dc-funnel-stage>
  <dc-funnel-stage value="3000" label="Stage 2"></dc-funnel-stage>
  <dc-funnel-stage value="1500" label="Stage 3"></dc-funnel-stage>
  <dc-funnel-stage value="750" label="Stage 4"></dc-funnel-stage>
</dc-funnel-chart>
Standard Funnel

Dramatic Narrowing (40%)

<dc-funnel-chart width="450" height="400" funnel-factor="40">
  <dc-title>Dramatic Funnel</dc-title>
  <dc-funnel-stage value="5000" label="Stage 1"></dc-funnel-stage>
  <dc-funnel-stage value="3000" label="Stage 2"></dc-funnel-stage>
  <dc-funnel-stage value="1500" label="Stage 3"></dc-funnel-stage>
  <dc-funnel-stage value="750" label="Stage 4"></dc-funnel-stage>
</dc-funnel-chart>
Dramatic Funnel

Nearly Straight (90%)

<dc-funnel-chart width="450" height="400" funnel-factor="90">
  <dc-title>Subtle Funnel</dc-title>
  <dc-funnel-stage value="5000" label="Stage 1"></dc-funnel-stage>
  <dc-funnel-stage value="3000" label="Stage 2"></dc-funnel-stage>
  <dc-funnel-stage value="1500" label="Stage 3"></dc-funnel-stage>
  <dc-funnel-stage value="750" label="Stage 4"></dc-funnel-stage>
</dc-funnel-chart>
Subtle Funnel

Inverted Funnel (-70%)

<dc-funnel-chart width="450" height="400" funnel-factor="-70">
  <dc-title>Inverted Funnel</dc-title>
  <dc-funnel-stage value="750" label="Stage 1"></dc-funnel-stage>
  <dc-funnel-stage value="1500" label="Stage 2"></dc-funnel-stage>
  <dc-funnel-stage value="3000" label="Stage 3"></dc-funnel-stage>
  <dc-funnel-stage value="5000" label="Stage 4"></dc-funnel-stage>
</dc-funnel-chart>
Inverted Funnel

Custom Colors

Customize colors using per-stage colors or automatic gradients:

Per-Stage Colors

<dc-funnel-chart width="500" height="400">
  <dc-title>Lead Pipeline</dc-title>
  <dc-funnel-stage value="5000" label="Leads" fill="#4CAF50"></dc-funnel-stage>
  <dc-funnel-stage value="2500" label="Qualified" fill="#8BC34A"></dc-funnel-stage>
  <dc-funnel-stage value="1000" label="Opportunities" fill="#FFC107"></dc-funnel-stage>
  <dc-funnel-stage value="500" label="Proposals" fill="#FF9800"></dc-funnel-stage>
  <dc-funnel-stage value="200" label="Deals" fill="#FF5722"></dc-funnel-stage>
</dc-funnel-chart>
Lead Pipeline

Warm Palette

<dc-funnel-chart width="500" height="400"
                 palette="warm"
                 label-position="outside-right">
  <dc-title>Campaign Performance</dc-title>
  <dc-funnel-stage value="15000" label="Email Sent"></dc-funnel-stage>
  <dc-funnel-stage value="8500" label="Opened"></dc-funnel-stage>
  <dc-funnel-stage value="3200" label="Clicked"></dc-funnel-stage>
  <dc-funnel-stage value="1500" label="Visited"></dc-funnel-stage>
  <dc-funnel-stage value="600" label="Converted"></dc-funnel-stage>
</dc-funnel-chart>
Campaign Performance

Purple Palette

<dc-funnel-chart width="500" height="400"
                 palette="purples">
  <dc-title>Content Engagement</dc-title>
  <dc-funnel-stage value="25000" label="Views"></dc-funnel-stage>
  <dc-funnel-stage value="12000" label="Read 50%"></dc-funnel-stage>
  <dc-funnel-stage value="5000" label="Complete"></dc-funnel-stage>
  <dc-funnel-stage value="1200" label="Subscribed"></dc-funnel-stage>
</dc-funnel-chart>
Content Engagement

Stage Heights

Control segment heights using different modes and constraints:

Fixed Heights

<dc-funnel-chart width="450" height="400" stage-height="80px">
  <dc-title>Marketing Funnel</dc-title>
  <dc-funnel-stage value="5000" label="Awareness"></dc-funnel-stage>
  <dc-funnel-stage value="2000" label="Interest"></dc-funnel-stage>
  <dc-funnel-stage value="800" label="Consider"></dc-funnel-stage>
  <dc-funnel-stage value="300" label="Convert"></dc-funnel-stage>
</dc-funnel-chart>
Marketing Funnel

Proportional to Values

<dc-funnel-chart width="450" height="400" stage-height="value">
  <dc-title>Sales Conversion</dc-title>
  <dc-funnel-stage value="10000" label="Visitors"></dc-funnel-stage>
  <dc-funnel-stage value="5000" label="Views"></dc-funnel-stage>
  <dc-funnel-stage value="2000" label="Cart"></dc-funnel-stage>
  <dc-funnel-stage value="1000" label="Checkout"></dc-funnel-stage>
  <dc-funnel-stage value="750" label="Purchase"></dc-funnel-stage>
</dc-funnel-chart>
Sales Conversion

Logarithmic Scale

<dc-funnel-chart width="450" height="400" stage-height="log-value">
  <dc-title>User Growth</dc-title>
  <dc-funnel-stage value="1000000" label="Impressions"></dc-funnel-stage>
  <dc-funnel-stage value="100000" label="Clicks"></dc-funnel-stage>
  <dc-funnel-stage value="10000" label="Signups"></dc-funnel-stage>
  <dc-funnel-stage value="1000" label="Active"></dc-funnel-stage>
  <dc-funnel-stage value="100" label="Paying"></dc-funnel-stage>
</dc-funnel-chart>
User Growth

With Constraints

<dc-funnel-chart width="450" height="400"
                 stage-height="value"
                 stage-min-height="50px"
                 stage-max-height="120px">
  <dc-title>Constrained Funnel</dc-title>
  <dc-funnel-stage value="10000" label="Visitors"></dc-funnel-stage>
  <dc-funnel-stage value="5000" label="Views"></dc-funnel-stage>
  <dc-funnel-stage value="2000" label="Cart"></dc-funnel-stage>
  <dc-funnel-stage value="1000" label="Checkout"></dc-funnel-stage>
  <dc-funnel-stage value="750" label="Purchase"></dc-funnel-stage>
</dc-funnel-chart>
Constrained Funnel

Shaped Funnels

Create down-facing chevron shapes instead of straight edges using the chevron attribute:

Basic Chevron

<dc-funnel-chart width="500" height="500" chevron="25px">
  <dc-title>Sales Pipeline</dc-title>
  <dc-funnel-stage value="8000" label="Interested"></dc-funnel-stage>
  <dc-funnel-stage value="3500" label="Intro Call"></dc-funnel-stage>
  <dc-funnel-stage value="1800" label="Demo Completed"></dc-funnel-stage>
  <dc-funnel-stage value="900" label="Proposal Sent"></dc-funnel-stage>
  <dc-funnel-stage value="450" label="Closed Won"></dc-funnel-stage>
</dc-funnel-chart>
Sales Pipeline

Chevron with Green Palette

<dc-funnel-chart width="500" height="500" chevron="5%"
                 palette="greens">
  <dc-title>Recruitment Funnel</dc-title>
  <dc-funnel-stage value="2000" label="Applications"></dc-funnel-stage>
  <dc-funnel-stage value="800" label="Phone Screen"></dc-funnel-stage>
  <dc-funnel-stage value="300" label="Technical Interview"></dc-funnel-stage>
  <dc-funnel-stage value="100" label="Final Round"></dc-funnel-stage>
  <dc-funnel-stage value="30" label="Offers Made"></dc-funnel-stage>
</dc-funnel-chart>
Recruitment Funnel

Flat Top

<dc-funnel-chart width="500" height="500" chevron="25px" flat-top>
  <dc-title>Content Funnel</dc-title>
  <dc-funnel-stage value="10000" label="Impressions"></dc-funnel-stage>
  <dc-funnel-stage value="5000" label="Views"></dc-funnel-stage>
  <dc-funnel-stage value="2000" label="Reads"></dc-funnel-stage>
  <dc-funnel-stage value="500" label="Shares"></dc-funnel-stage>
</dc-funnel-chart>
Content Funnel

Flat Bottom

<dc-funnel-chart width="500" height="500"
                 chevron="25px"
                 flat-bottom
                 palette="sunset">
  <dc-title>Sales Pipeline</dc-title>
  <dc-funnel-stage value="8000" label="Leads"></dc-funnel-stage>
  <dc-funnel-stage value="4000" label="Qualified"></dc-funnel-stage>
  <dc-funnel-stage value="1500" label="Proposals"></dc-funnel-stage>
  <dc-funnel-stage value="600" label="Closed"></dc-funnel-stage>
</dc-funnel-chart>
Sales Pipeline

Stage Borders

Add borders to funnel stages using stroke attributes:

Basic Borders

<dc-funnel-chart width="450" height="400"
                 stroke="2 #333">
  <dc-title>Sales Funnel</dc-title>
  <dc-funnel-stage value="5000" label="Leads"></dc-funnel-stage>
  <dc-funnel-stage value="3000" label="Qualified"></dc-funnel-stage>
  <dc-funnel-stage value="1500" label="Proposals"></dc-funnel-stage>
  <dc-funnel-stage value="750" label="Closed"></dc-funnel-stage>
</dc-funnel-chart>
Sales Funnel

Shorthand Syntax

<dc-funnel-chart width="450" height="400" stroke="3 white">
  <dc-title>Marketing Pipeline</dc-title>
  <dc-funnel-stage value="8000" label="Awareness"></dc-funnel-stage>
  <dc-funnel-stage value="4000" label="Interest"></dc-funnel-stage>
  <dc-funnel-stage value="2000" label="Decision"></dc-funnel-stage>
  <dc-funnel-stage value="1000" label="Action"></dc-funnel-stage>
</dc-funnel-chart>
Marketing Pipeline

Borders with Chevron

<dc-funnel-chart width="450" height="400"
                 chevron="20px"
                 stroke="2 #2196F3"
                 palette="blues">
  <dc-title>User Journey</dc-title>
  <dc-funnel-stage value="12000" label="Landing"></dc-funnel-stage>
  <dc-funnel-stage value="7000" label="Explore"></dc-funnel-stage>
  <dc-funnel-stage value="3500" label="Engage"></dc-funnel-stage>
  <dc-funnel-stage value="1800" label="Convert"></dc-funnel-stage>
</dc-funnel-chart>
User Journey