Data display

Charts

Bar, line and radar charts on brand tokens, each with its data.

import { BarChart, LineChart, RadarChart } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Bar chart

Applications by stage

Show data

Category	Value
Applied	14
Screen	5
Interview	3
Offer	2

charts/bar.tsx

import { BarChart } from '@jsonresume/ui';

export default function ChartsBar() {
  return (
    <BarChart
      title="Applications by stage"
      summary="24 applications: most are at Applied, 2 reached an offer."
      data={[
        { label: 'Applied', value: 14 },
        { label: 'Screen', value: 5 },
        { label: 'Interview', value: 3 },
        { label: 'Offer', value: 2, highlight: true },
      ]}
    />
  );
}

Line chart

Weekly job matches

All matches
Strong matches

Show data

	All matches	Strong matches
W1	8	3
W2	11	4
W3	10	4
W4	15	5
W5	18	6
W6	21	7

charts/line.tsx

import { LineChart } from '@jsonresume/ui';

export default function ChartsLine() {
  return (
    <LineChart
      title="Weekly job matches"
      summary="Matches grew from 8 to 21 over six weeks; strong matches doubled."
      labels={['W1', 'W2', 'W3', 'W4', 'W5', 'W6']}
      series={[
        { name: 'All matches', values: [8, 11, 10, 15, 18, 21] },
        { name: 'Strong matches', values: [3, 4, 4, 5, 6, 7] },
      ]}
    />
  );
}

Radar chart

Readiness

Show data

Dimension	Score
Skills	82
Experience	90
Impact	45
Education	60
Keywords	74

charts/radar.tsx

import { RadarChart } from '@jsonresume/ui';
import * as styles from './radar.css';

export default function ChartsRadar() {
  return (
    <div className={styles.root}>
      <RadarChart
        title="Readiness"
        summary="Strongest in experience and skills; impact needs work."
        data={[
          { label: 'Skills', value: 82 },
          { label: 'Experience', value: 90 },
          { label: 'Impact', value: 45 },
          { label: 'Education', value: 60 },
          { label: 'Keywords', value: 74 },
        ]}
      />
    </div>
  );
}

charts/radar.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: 'min(100%, 22rem)' });

Usage

Do

Write the summary as the conclusion the chart supports.
Highlight the one bar that matters.

Don’t

Use more than four line series.
Use a radar chart for fewer than three dimensions.

Accessibility

Each chart is a figure with a one-sentence summary (role img) and a "Show data" table.
Points and bars carry titles for hover.

Props

Also accepts the attributes of the element BarChart renders.
Prop	Type	Default
data required	BarDatum[]	–
summary required	string	–
title required	string	–
formatValue	((v: number) => string)	–
height	number	220

Also accepts the attributes of the element LineChart renders.
Prop	Type	Default
labels required	string[]	–
series required	LineSeries[]	–
summary required	string	–
title required	string	–
formatValue	((v: number) => string)	–
height	number	220

Also accepts the attributes of the element RadarChart renders.
Prop	Type	Default	Description
data required	{ label: string; value: number; }[]	–	Axis label and a 0–100 value for each.
summary required	string	–
title required	string	–
size	number	320