ChartNeverAlone [rule] v1.0.0

Every chart requires paired context numbers. A line going up does not communicate a value, a range, or a delta — those are what users need for decisions. Extracted from StyleSeed DESIGN-LANGUAGE.md §69 (github.com/bitjaru/styleseed, MIT).

Every chart requires paired context. Required pairings by chart type: Area chart → period toggle (1W/1M/3M) in card header + 2-3 stat items below a border-t in the card footer. Bar chart → category labels on X-axis + a highlight color on the max bar. Donut chart → center value + clickable legend list (3-4 items) beside or below. Progress bars → label text left + percentage right on each bar. Stat footer rules: max 4 columns (grid-cols-3 or grid-cols-4), each cell with [label 11px uppercase] + [value 18px bold] + [unit 10px].

Label

Chart Never Alone — Always Pair with Context Numbers

Applies To

Any UI component that renders a chart — area, bar, donut, line, progress — inside a card, section, or modal.

Counter Example

A bare in a card with only a title — no period toggle, no stat footer, no supporting numbers. Users must visually interpolate values from gridlines.

ChartNeverAlone [rule] v1.0.0

Every chart requires paired context numbers. A line going up does not communicate a value, a range, or a delta — those are what users need for decisions. Extracted from StyleSeed DESIGN-LANGUAGE.md §69 (github.com/bitjaru/styleseed, MIT).

Every chart requires paired context. Required pairings by chart type: Area chart → period toggle (1W/1M/3M) in card header + 2-3 stat items below a border-t in the card footer. Bar chart → category labels on X-axis + a highlight color on the max bar. Donut chart → center value + clickable legend list (3-4 items) beside or below. Progress bars → label text left + percentage right on each bar. Stat footer rules: max 4 columns (grid-cols-3 or grid-cols-4), each cell with [label 11px uppercase] + [value 18px bold] + [unit 10px].

Label

Chart Never Alone — Always Pair with Context Numbers

Applies To

Any UI component that renders a chart — area, bar, donut, line, progress — inside a card, section, or modal.

Counter Example

A bare in a card with only a title — no period toggle, no stat footer, no supporting numbers. Users must visually interpolate values from gridlines.

Examples

•   {/* CORRECT — area chart with period toggle + stat footer */}
  <SectionCard>
    <div className="flex items-center justify-between mb-6">
      <h3 className="text-[18px] font-bold">Revenue Trend</h3>
      <PillToggle options={["1W","1M","3M"]} active="1W" />
    </div>
  
    <AreaChart data={revenue} className="h-40" />
  
    <div className="grid grid-cols-3 gap-3 pt-5 border-t border-surface-muted">
      <div className="text-center">
        <p className="text-[11px] text-text-secondary font-medium uppercase mb-1.5">Web</p>
        <p className="text-text-primary font-bold text-[18px]">$1,648<span className="text-[10px] ms-0.5">/mo</span></p>
      </div>
      <div className="text-center">
        <p className="text-[11px] text-text-secondary font-medium uppercase mb-1.5">Mobile</p>
        <p className="text-text-primary font-bold text-[18px]">$1,520<span className="text-[10px] ms-0.5">/mo</span></p>
      </div>
      <div className="text-center">
        <p className="text-[11px] text-text-secondary font-medium uppercase mb-1.5">API</p>
        <p className="text-text-primary font-bold text-[18px]">$1,430<span className="text-[10px] ms-0.5">/mo</span></p>
      </div>
    </div>
  </SectionCard>
  
  {/* CORRECT — donut with center value + legend */}
  <DonutChartCard
    title="Usage Breakdown"
    centerValue={66} centerUnit="%" centerLabel="Average"
    items={[{ name: "Web", value: 80 }, { name: "Mobile", value: 55 }, { name: "API", value: 43 }]}
  />
  

Rationale

A line going up tells the user the trend is positive. It does not tell them what the current value is, what the range is, or how much it grew. Those specifics are what the user actually needs for a decision. Charts without stat context force the user to guess the numbers from visual interpolation ('that line is at about… two-thirds of the top gridline, so maybe $32K?'), which is slow, inaccurate, and cognitively expensive. Pairing chart + stats turns the chart into visual context for the numbers, rather than a standalone visualization. The eye reads '$1,648/mo · $1,520/mo · $1,430/mo' in the footer and uses the chart to see how they got there. That sequence (number → trend shape) is how professional trading terminals, financial dashboards, and analytics tools have displayed time-series data for decades. StyleSeed encodes this as a hard rule because the default AI output is 'here's a chart' — just the chart, floating in a card, with no stats. The period-toggle pairing serves a parallel purpose for area charts: it scopes the interpretation. A line rising fast over 1W means something different from a line rising slowly over 3M; without the period label, the slope is ambiguous.

Label

Chart Never Alone — Always Pair with Context Numbers

Applies To

Any UI component that renders a chart — area, bar, donut, line, progress — inside a card, section, or modal.

Counter Example

A bare in a card with only a title — no period toggle, no stat footer, no supporting numbers. Users must visually interpolate values from gridlines.