Charts

Charts overview

Fifteen dashboard charts, all with a period picker, hover highlight and numbers that count up.

Which chart for which question

The question	Charts
How did it change over time?	Area, Line, Combo, Revenue
How many make it from one stage to the next?	Funnel, Stage bars
What's at the top?	Bar list
How does the total break down?	Radial, Gauge
Where does it come from and where does it go?	Sankey
How do they compare across several axes?	Radar, Radar comparison
On which days does it happen most?	Heatmap, Rings
Does one thing move with the other?	Scatter

Shared rules

label is the card's small label. The big number is computed: sum, total or average, depending on the chart.
periods is a list of {label, delta, ...data}. Each item becomes an option in the picker, and the chart animates from the old data to the new. delta is the change in %, negative when it drops.
period picks the period it opens on. Without it, it opens on the first.
Color comes from --c1 to --c6, in order. Don't pass colors in the props.

The three shells

Every chart lives in a card with a shell, panel and tile. Three families share the same shell, and that decides what add downloads along with it.

Family	Charts	Shell	Pulls in
A	funnel, earnings, stages, area, combo	`u-chart-card`	nothing
B	radar, radar-compare, sankey, radial, gauge, heatmap, rings	`u-chartb-card`	`b-shell`
C	line, barlist, scatter	`u-chartc-card`	`a-chartc`

<article class="u-chart-card">
  <div class="u-chart-panel">
    <div data-u="funnel" data-u-props='{"label":"Signups","stages":[{"label":"Visited"},{"label":"Signed up"},{"label":"Subscribed"}],"periods":[{"label":"7 days","delta":6.1,"values":[2340,1310,310]}]}'></div>
  </div>
  <h3 class="u-chart-title">Signup funnel</h3>
  <p class="u-chart-desc">How many people reach each stage in the last 7 days.</p>
</article>