Chart

Themed wrappers around SwiftChart — line, area, bar, pie, donut, scatter, and radar — that follow Cynosure tokens out of the box.

stable
since v0.1.0
8.0 kB
data-display
chart
visualization

Preview

Open

tsx

import { LineChart } from '@arshad-shah/cynosure-react/chart';

const data = [
  { month: 'Jan', revenue: 1200 },
  { month: 'Feb', revenue: 1600 },
  { month: 'Mar', revenue: 2100 },
  { month: 'Apr', revenue: 1900 },
  { month: 'May', revenue: 2500 },
  { month: 'Jun', revenue: 3000 },
];

export default function Example() {
  return (
    <div style={{ width: '36rem', maxWidth: '100%' }}>
      <LineChart
        data={data}
        mapping={{ x: 'month', y: ['revenue'], seriesNames: ['Revenue'] }}
        smooth
        dots
        aspectRatio="16 / 9"
      />
    </div>
  );
}

Usage

Each chart accepts a data array and a mapping object that declares which fields to read for the axes / series.

import { LineChart } from '@arshad-shah/cynosure-react/chart';

const data = [
  { month: 'Jan', revenue: 1200 },
  { month: 'Feb', revenue: 1600 },
];

<LineChart
  data={data}
  mapping={{ x: 'month', y: ['revenue'], seriesNames: ['Revenue'] }}
  smooth
  dots
/>

Bar chart

BarChart renders vertical bars. Pass an array to mapping.y for grouped bars.

Preview

Open

tsx

import { BarChart } from '@arshad-shah/cynosure-react/chart';

const data = [
  { quarter: 'Q1', revenue: 4200, cost: 2400 },
  { quarter: 'Q2', revenue: 5600, cost: 2900 },
  { quarter: 'Q3', revenue: 6100, cost: 3100 },
  { quarter: 'Q4', revenue: 7300, cost: 3500 },
];

export default function Example() {
  return (
    <div style={{ width: '36rem', maxWidth: '100%' }}>
      <BarChart
        data={data}
        mapping={{ x: 'quarter', y: ['revenue', 'cost'], seriesNames: ['Revenue', 'Cost'] }}
        aspectRatio="16 / 9"
      />
    </div>
  );
}

Area chart

AreaChart is equivalent to a line chart with a gradient fill — pass smooth for a softened curve.

Preview

Open

tsx

import { AreaChart } from '@arshad-shah/cynosure-react/chart';

const data = [
  { week: 'W1', visits: 820 },
  { week: 'W2', visits: 1040 },
  { week: 'W3', visits: 1380 },
  { week: 'W4', visits: 1290 },
  { week: 'W5', visits: 1620 },
  { week: 'W6', visits: 1890 },
];

export default function Example() {
  return (
    <div style={{ width: '36rem', maxWidth: '100%' }}>
      <AreaChart
        data={data}
        mapping={{ x: 'week', y: 'visits', seriesNames: ['Visits'] }}
        smooth
        aspectRatio="16 / 9"
      />
    </div>
  );
}

Donut chart

DonutChart and PieChart consume labelField / valueField instead of x / y.

Preview

Open

tsx

import { DonutChart } from '@arshad-shah/cynosure-react/chart';

const data = [
  { channel: 'Direct', value: 38 },
  { channel: 'Search', value: 27 },
  { channel: 'Social', value: 18 },
  { channel: 'Email', value: 11 },
  { channel: 'Referral', value: 6 },
];

export default function Example() {
  return (
    <div style={{ width: '28rem', maxWidth: '100%' }}>
      <DonutChart
        data={data}
        mapping={{ labelField: 'channel', valueField: 'value' }}
        aspectRatio="1 / 1"
      />
    </div>
  );
}

Sizing

Each chart wraps in a sized container. Use aspectRatio for fluid responsive charts (default "16 / 9"), or pass an explicit height for fixed dashboards. minHeight (default 220) keeps the chart usable inside flex containers.

API

PropTypeDefaultDescription

aspectRatio

string|number

"16 / 9"

Aspect ratio for the wrapper. Accepts any CSS `aspect-ratio` value (e.g. `"16 / 9"`, `"4/3"`) or a number (`1.78`). Ignored when `height` is set.

minHeight

string|number

220

Minimum height applied to the wrapper — keeps the canvas from collapsing inside flex/grid parents that don't define an intrinsic height.

Accessibility

Charts paint to a <canvas> — provide a descriptive aria-label (or a visible heading) so the chart’s purpose is announced.
Pair quantitative charts with a hidden data table (or <details> block) so screen-reader users can access the raw values.
The default palette adapts to the active color scheme via the registered cynosure-light / cynosure-dark SwiftChart themes.
Tooltips fire on pointer move and on focus where supported.
Color alone never conveys meaning — series names are surfaced via the legend and tooltips.

Recipes

Use aspectRatio="16 / 9" for hero charts; set height for fixed-size dashboards.
Pass a custom theme to override the default light/dark theme registration.
Combine smooth + dots for a clean, readable trendline.
Use the named chart you need — LineChart, BarChart, AreaChart, PieChart, DonutChart, RadarChart, ScatterChart, WaterfallChart, TreemapChart, or Sparkline.