@nomiedge/charts

Token-native, accessible chart components for the Nomiedge Design Language: LineChart, AreaChart, BarChart, Sparkline, RadialChart — five thin, strictly-typed wrappers over a single vendor primitive.

Install

pnpm add @nomiedge/charts echarts echarts-for-react

echarts and echarts-for-react are peer dependencies — bring your own versions (^6.0.0 / ^3.0.0 or compatible), matching the versions apps/dashboard/apps/marketingresults already use elsewhere in this monorepo.

Why ECharts

See docs/adr/0005-echarts-vendor-choice.md. No vendor type or component is ever importable from this package's public API — every chart's option is built internally from data/series props you pass in.

Usage

import { LineChart } from "@nomiedge/charts";

<LineChart
  data={weeks}
  x="week"
  series={[{ key: "count", label: "Debates" }]}
  ariaLabel="Debates run per week over the last quarter"
/>;

Every chart renders a visually-hidden data table alongside its visual (same data, real <table>) plus role="img" + aria-label — screen-reader users get the real numbers, not just a description.

Reduced motion

Every chart disables its mount animation entirely when useReducedMotion() (from @nomiedge/motion) is true — no CSS override, ECharts' own animation option.