Funnel chart

A <figure class="funnel-chart"> draws each row of a <table> as a stage, from the top down, as wide as its value.

The first column labels each row and the second holds its value. The largest value fills the chart's width, and every other stage is as wide as its share of it, centered under the one before. Stages follow the table's order, so list the steps people take in the order they take them, such as a visit, a signup and a purchase. To compare values that are not steps, use a bar chart.

<figure class="funnel-chart">
  <figcaption>Signups this month</figcaption>
  <table>
    <thead>
      <tr><th>Step</th><th>People</th><th>Revenue</th></tr>
    </thead>
    <tbody>
      <tr><th>Visited</th><td>12,000</td><td>$0</td></tr>
      <tr><th>Signed up</th><td>4,800</td><td>$0</td></tr>
      <!-- One row per step, in order -->
    </tbody>
  </table>
</figure>

Values and gaps

Cells read as in a line chart. A cell's number is its data-value, or its text without currency signs, percent signs or grouping commas. The tooltip shows the cell's text as written, followed by the stage's value as a percentage of the first row's, such as "4,800 (40%)". Below 10% the percentage keeps a tenth.

A row whose value is not a number, or is zero or less, draws no stage but keeps its place and its label, and has no percentage. Only the second column draws stages. Further columns, such as revenue above, show in the tooltip with their header, so the chart has no legend.

Accessibility

The table is the chart's text alternative. Give it a header row and a header cell per row, and name the chart with a <figcaption>. The drawn stages and labels are hidden from assistive technology.

The plot is one Tab stop named by the caption. Keyboard focus shows the first row. The down and up arrows move to the next row and the one before, Home and End jump to the first and last rows, and Escape hides the tooltip. The keys are the same in a right-to-left page, where the labels move to the right. The pointer shows the row under it. The tooltip is a polite live region, so a screen reader hears the row, its value and its percentage as it moves. In forced colors the stages keep their color.

JavaScript

AutoInit() starts every .funnel-chart. To start one yourself, call FunnelChart.init. After changing its table, call update() to redraw it in place, or put data-watch on the figure and it redraws itself. Each stage grows or shrinks from its old width, or takes its new width at once with reduced motion. It has the line chart's options and methods.

const chart = Expressive.FunnelChart.init(document.querySelector('.funnel-chart'));
chart.show(2);   // highlight the third row; -1 hides the tooltip
chart.update();  // redraw from the table; focus and the highlighted row stay
chart.destroy(); // remove the drawing and show the table again

Tokens

Override these on the .funnel-chart.

For a selective Sass build, include "funnel-chart" in $components.