Chart

The foundation every Gremorie chart composes on — ChartContainer, ChartTooltip, and ChartLegend, a token-aware recharts wrapper.

Overview

Chart is the foundation primitive that every rx-* chart composes on. Ported from shadcn/ui's proven recharts wrapper and adapted to Gremorie tokens, it provides the pieces you wrap raw recharts in: ChartContainer (responsive frame + per-series CSS color vars), ChartTooltip / ChartTooltipContent (the hover card), and ChartLegend / ChartLegendContent (the legend). The useChart hook returns the active ChartConfig from context.

You usually reach for a ready-made chart — BarChart, LineChart, AreaChart, and the rest are thin wrappers over this primitive. Drop to Chart directly when you need full control: extra reference lines, a custom legend, mixed series, or a recharts type the wrappers don't cover. ChartContainer still injects your token colors as var(--color-<key>) and styles the tooltip, so you only author the recharts you actually need.

Preview

'use client';import {  ChartContainer,  ChartLegend,  ChartLegendContent,  ChartTooltip,  ChartTooltipContent,  type ChartConfig,} from '@gremorie/rx-data';import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';const data = [  { month: 'Jan', desktop: 186, mobile: 80 },  { month: 'Feb', desktop: 305, mobile: 200 },  { month: 'Mar', desktop: 237, mobile: 120 },  { month: 'Apr', desktop: 173, mobile: 190 },  { month: 'May', desktop: 209, mobile: 130 },  { month: 'Jun', desktop: 214, mobile: 140 },];const config: ChartConfig = {  desktop: { label: 'Desktop', color: 'var(--chart-1)' },  mobile: { label: 'Mobile', color: 'var(--chart-2)' },};export function ChartPreview() {  return (    <ChartContainer config={config}>      <BarChart accessibilityLayer data={data}>        <CartesianGrid vertical={false} />        <XAxis          dataKey="month"          tickLine={false}          axisLine={false}          tickMargin={10}        />        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />        <ChartLegend content={<ChartLegendContent />} />        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={8} />      </BarChart>    </ChartContainer>  );}

Anatomy

ChartContainer                 responsive frame; injects --color-<key> from config; provides chart context
├─ ChartStyle                  emits the per-series CSS color vars (light + dark)
└─ ResponsiveContainer         recharts responsive wrapper
   └─ <recharts chart>         your BarChart / LineChart / etc.
      ├─ ChartTooltip          recharts Tooltip
      │  └─ ChartTooltipContent  token-styled tooltip body
      └─ ChartLegend           recharts Legend
         └─ ChartLegendContent   token-styled legend body

Installation

bash npx gremorie@latest add rx-chart

bash pnpm dlx gremorie@latest add rx-chart

bash yarn dlx gremorie@latest add rx-chart

bash bunx --bun gremorie@latest add rx-chart

Brings in recharts. Every other chart primitive (rx-bar-chart, rx-line-chart, …) depends on this one.

Usage

import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@gremorie/rx-data";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";

const config: ChartConfig = {
desktop: { label: "Desktop", color: "var(--chart-1)" },
mobile: { label: "Mobile", color: "var(--chart-2)" },
};

export function Example({ data }: { data: Record<string, string | number>[] }) {
  return (
    <ChartContainer config={config}>
      <BarChart accessibilityLayer data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={10} />
        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
        <ChartLegend content={<ChartLegendContent />} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={8} />
      </BarChart>
    </ChartContainer>
  );
}

The Angular (ng-*) charts mirror this anatomy and structure. A standalone ng-chart primitive ships alongside them.

API

`<ChartContainer>`

Prop	Type	Default	Description
`config`	`ChartConfig`	-	Per-series `{ label, color, icon }` map. Each `color` is exposed as `var(--color-<key>)`.
`children`	`ResponsiveContainer children`	-	A single recharts chart element.
`id`	`string`	auto	Stable id used to scope the injected CSS color vars.
`initialDimension`	`{ width; height }`	`{ 320, 200 }`	Initial size before the responsive container measures.
`className`	`string`	-	Extra classes; the base class pins `aspect-video` and recharts tick/grid token styling.

Provides chart context. Renders ChartStyle + a recharts ResponsiveContainer.

`<ChartTooltip>` / `<ChartTooltipContent>`

ChartTooltip is recharts' Tooltip. ChartTooltipContent is the token-styled body.

Prop (Content)	Type	Default	Description
`indicator`	`"dot" \| "line" \| "dashed"`	`"dot"`	Series swatch style.
`hideLabel`	`boolean`	`false`	Hide the category label row.
`hideIndicator`	`boolean`	`false`	Hide the per-series color swatch.
`nameKey`	`string`	-	Override the key used to resolve the series name.
`labelKey`	`string`	-	Override the key used to resolve the label.

`<ChartLegend>` / `<ChartLegendContent>`

ChartLegend is recharts' Legend. ChartLegendContent is the token-styled body.

Prop (Content)	Type	Default	Description
`hideIcon`	`boolean`	`false`	Hide the per-series icon/swatch.
`nameKey`	`string`	-	Override the key used to resolve names.
`verticalAlign`	`"top" \| "bottom"`	`"bottom"`	Padding side for the legend.

`useChart()`

Hook returning { config } from the nearest ChartContainer. Throws if used outside one.

Types

Type	Shape
`ChartConfig`	`Record<string, { label?: ReactNode; icon?: ComponentType } & ({ color?: string } \| { theme }) >`

Composition

Author config — one entry per series with a label and a token color (var(--chart-1)…).
Wrap recharts in <ChartContainer config={config}> — it injects var(--color-<key>) and sizes the frame.
Reference colors as var(--color-<key>) on Bar/Area/Line fill/stroke.
Add <ChartTooltip content={<ChartTooltipContent />} /> and, if needed, <ChartLegend content={<ChartLegendContent />} />.

Variations

<ChartTooltip content={<ChartTooltipContent indicator="line" />} />

Legend at the top

<ChartLegend verticalAlign="top" content={<ChartLegendContent />} />

Accessibility

Accessibility layer: enable recharts' accessibilityLayer on your chart for keyboard navigation and screen-reader announcements of data points.
Token contrast: --chart-1 through --chart-5 ship with AA contrast against the card surface in both themes.
Color is not the only signal: pair series colors with labels in the tooltip and legend so meaning survives without color.

Bar Chart - the categorical wrapper built on this primitive.
Line Chart - ordered-domain trends.
Area Chart - filled magnitude over an ordered domain.