Text funnel charts for conversion stages

Use glyphChartFunnel(data, { stage?, value?, name?, color? }). The workbench’s illustrative conversion funnel below uses benchmark-shaped counts, not observations from a particular store.

███████████████████████████████████  Visits         10,000  100%        
                                                                        
 ▜███████████████████████████████▛                                      
  ▝▜███████████████████████████▛▘                                       
   ▐███████████████████████████▌     Product Views   6,500   65%        
                                                                        
    ▝▜███████████████████████▛▘                                         
      ▝▜███████████████████▛▘                                           
       ▐███████████████████▌         Add to Cart     3,200   32%   ↓ 49%
                                                                        
        ▝▜███████████████▛▘                                             
         ▐███████████████▌           Shipping        2,100   21%   ↓ 66%
                                                                        
          ▜█████████████▛                                               
          ▐█████████████▌            Payment         1,600   16%   ↓ 76%
                                                                        
          ▝█████████████▘                                               
           █████████████             Review          1,400   14%   ↓ 88%
                                                                        
           ▜███████████▛                                                
           ▐███████████▌             Purchase        1,250   13%   ↓ 89%

Code

import { renderGlyphChart } from "@glyphcss/charts";

const { text } = renderGlyphChart({
  type: "funnel",
  data: [
    {
      stage: "Visits",
      count: 10000
    },
    {
      stage: "Product Views",
      count: 6500
    },
    {
      stage: "Add to Cart",
      count: 3200
    },
    {
      stage: "Shipping",
      count: 2100
    },
    {
      stage: "Payment",
      count: 1600
    },
    {
      stage: "Review",
      count: 1400
    },
    {
      stage: "Purchase",
      count: 1250
    }
  ],
  channels: {
    stage: "stage",
    value: "count"
  }
}, {
  target: "chat",
  width: 72,
  height: 23
});
console.log(text);

import { glyphChartFunnel, renderGlyphChart } from "@glyphcss/charts";
const result = renderGlyphChart(
  glyphChartFunnel(
    [
      { stage: "Visits", count: 10000 },
      { stage: "Product Views", count: 6500 },
      { stage: "Add to Cart", count: 3200 },
      { stage: "Shipping", count: 2100 },
      { stage: "Payment", count: 1600 },
      { stage: "Review", count: 1400 },
      { stage: "Purchase", count: 1250 },
    ],
    { stage: "stage", value: "count" },
  ),
  { target: "chat", width: 72, height: 23 },
);

Stages keep their declared order. Values must be finite and nonnegative; a bare number array uses its indices as stage names. Labels show values and percentages relative to the first stage when it is positive.

Widths follow square roots of stage values to keep late stages readable. They are not a linear width scale. Growing stages report funnel-not-monotone; very small stages can become one-cell stubs (funnel-thin-stage). More height keeps stages from folding together. An all-zero funnel reports empty-total.

Funnels reject Cartesian scales and transforms. Use bar charts when readers need direct comparisons of lengths on a numeric axis.