Visual Data

Charts

Chart patterns use a consistent surface wrapper and token-driven color mapping. Bring your preferred charting library and keep semantics aligned with UI tokens.

Source files: styles/components/chart.css (theme) — showcase/showcase.css (demo helpers only)

Chart Container

Use .chart-container as a neutral host for any SVG/canvas chart output.

Monthly Subscription Spend & Savings

120 90 60 30 0 Nov Dec Jan

Token Mapping

TokenChart role
--wm-color-accentPrimary data series
--wm-color-successPositive / savings series
--wm-color-borderGrid and axis rules
--wm-color-text-mutedAxis tick labels

Empty State

Monthly Spend

No chart data available.

return (
  <div className="chart-container">
    <h3>Monthly Subscription Spend</h3>
    {data.length ? (
      <ResponsiveContainer width="100%" height={280}>
        <BarChart data={data}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="month" />
          <YAxis />
          <Bar dataKey="amount" fill="var(--wm-color-accent)" />
        </BarChart>
      </ResponsiveContainer>
    ) : (
      <p className="chart-empty">No chart data available.</p>
    )}
  </div>
);