Chart

Low-level recharts container + themed tooltip / legend. Use ONLY when composing a custom chart with raw recharts primitives. For ordinary bar / line / area / pie / radar / radial charts, prefer the **styled chart wrappers** (`BarChart`, `LineChart`, … — see the `Charts` family). Their `data` + `xKey` + `series` prop surface handles palette + legend + tooltip + container sizing for you in one component.

Usage

TSX

import {
  Bar,
  BarChart,
  CartesianGrid,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  XAxis,
  YAxis,
} from "@aeontel/ui";

const config = {
  runs: { label: "Runs", color: "var(--chart-1)" },
};

<ChartContainer config={config}>
  <BarChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="day" />
    <YAxis />
    <Bar dataKey="runs" fill="var(--color-runs)" radius={4} />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>;

Exports

`ChartContainer`

Themed Recharts ResponsiveContainer with CSS variable config injection.

TypeScript

ChartContainer(props: React.ComponentProps<"div"> & { config: ChartConfig; children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"]; initialDimension?: { width: number; height: number; }; }): JSX.Element

Props

Prop	Type	Default	Description
`config`	`ChartConfig`	—
`initialDimension?`	`{ width: number; height: number; } \| undefined`	`INITIAL_DIMENSION`

`ChartStyle`

Injects chart-scoped CSS variables derived from the chart config.

TypeScript

ChartStyle(props: ComponentProps): JSX.Element

Props

Prop	Type	Default	Description
`id`	`string`	—
`config`	`ChartConfig`	—

`ChartTooltip`

Re-export of recharts' Tooltip — use with ChartTooltipContent.

TypeScript

ChartTooltip(props: ComponentProps): JSX.Element

`ChartTooltipContent`

Themed tooltip body for use inside ChartTooltip.

TypeScript

ChartTooltipContent(props: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & { hideLabel?: boolean; hideIndicator?: boolean; indicator?: "line" | "dot" | "dashed"; nameKey?: string; labelKey?: string; } & Omit< RechartsPrimitive.DefaultTooltipContentProps< TooltipValueType, TooltipNameType >, "accessibilityLayer" >): JSX.Element

Props

Prop	Type	Default
`hideLabel?`	`boolean \| undefined`	`false`
`hideIndicator?`	`boolean \| undefined`	`false`
`indicator?`	`"line" \| "dot" \| "dashed" \| undefined`	`"dot"`
`nameKey?`	`string \| undefined`	—
`labelKey?`	`string \| undefined`	—

`ChartLegend`

Re-export of recharts' Legend — use with ChartLegendContent.

TypeScript

ChartLegend(props: ComponentProps): JSX.Element

`ChartLegendContent`

Themed legend body for use inside ChartLegend.

TypeScript

ChartLegendContent(props: React.ComponentProps<"div"> & { hideIcon?: boolean; nameKey?: string; } & RechartsPrimitive.DefaultLegendContentProps): JSX.Element

Props

Prop	Type	Default	Description
`hideIcon?`	`boolean \| undefined`	`false`
`nameKey?`	`string \| undefined`	—