@labmgm/charts

Brand-skinned chart components for the MGM Laboratory Design System, built on Recharts.

Install

pnpm add @labmgm/charts recharts react react-dom

Use

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

const data = [
  { month: "Jan", revenue: 240, signups: 18 },
  { month: "Feb", revenue: 310, signups: 24 },
  { month: "Mar", revenue: 420, signups: 31 },
];

<LineChart
  data={data}
  xKey="month"
  series={[
    { dataKey: "revenue", name: "Revenue ($k)" },
    { dataKey: "signups", name: "Signups" },
  ]}
  lead="blue"      // page's leading brand colour
  height={300}
/>

Charts

| Component | When to use | | ----------------- | ------------------------------------------------------------ | | <LineChart> | Trend over time, ≤ 4 series. | | <AreaChart> | Trend with volume connotation (revenue, traffic). | | <BarChart> | Discrete categories. ≤ 8 bars per axis. | | <StackedBarChart>| Same, with cumulative breakdown. | | <PieChart> | Composition with ≤ 5 slices. Use innerRadius for donuts. | | <RadarChart> | Multi-axis comparison (capability scores, feature breakdown).| | <ScatterChart> | Correlation, distribution. |

Brand-spec adherence

• Series colours start from the leading brand colour and step through the other three in a fixed order — chosen via the lead prop. Never an unconstrained palette; never gradients between brand colours.
• Axes, grid, tooltip read from CSS variables (--line, --ink-3, --surface, --shadow-2) so they switch with the theme automatically.
• Pie / donut slices have a 2 px stroke in --surface so they read clearly even in dark mode without relying on opacity.
• Bars have radius={[6,6,0,0]} and maxBarSize={48} per spec §4.5 + §7.6.

For custom recipes, the primitives (ChartGrid, ChartXAxis, ChartYAxis, ChartLegend, ChartTooltip) are also exported so you can drop them into a raw Recharts <ComposedChart>.

License

MIT © MGM Laboratory.