Design a Chart

Design a Chart From a User Goal

Use this scenario loop: trigger → inspect → decide → build → verify. Do not begin with a chart type, even when the request names one.

Setup

Turn the request into this brief before writing chart code:

interface ChartBrief {
  question: string
  decision: string
  observation: string
  metric: { value: string; unit: string; denominator?: string }
  comparison:
    'time' | 'category' | 'distribution' | 'relationship' | 'composition'
  evidence: readonly string[]
}

export const brief: ChartBrief = {
  question:
    'Which acquisition channel improved conversion without losing volume?',
  decision: 'Choose where to increase next-month spend',
  observation: 'one row per channel and month',
  metric: { value: 'conversionRate', unit: '%', denominator: 'sessions' },
  comparison: 'time',
  evidence: ['conversion rate', 'sessions', 'month', 'channel'],
}

If the question, observation, unit, denominator, or decision is unknown, inspect the data and surrounding product before choosing marks.

Core Patterns

Match the form to the reader's comparison

• Change over ordered time → line; discrete periods → bars.
• Named-category magnitude → sorted horizontal bars or dots.