Charts

Chart

Low-level recharts primitive: ChartContainer, tooltip, cursor, legend.

Import

tsx

import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartCursor, ChartLegend, ChartLegendContent } from "@cronus-ui/ui";

bash

npx cronus-ui add chart

Low-level recharts primitive. Named charts ship a Default example and a Motion example (clip-reveal, crosshair, date pill).

tsx

import {
  ChartContainer,
  ChartCursor,
  ChartTooltip,
  ChartTooltipContent,
} from "@cronus-ui/ui";

Compose RadialBarChart yourself inside ChartContainer when a named chart is too opinionated.

tsx

<RadialBarChart data={chartData} innerRadius={32} outerRadius={110}>
  <RadialBar dataKey="visitors" background cornerRadius={8} />
</RadialBarChart>

Generated from the component's exported types.

Prop	Type	Default	Description
`x`	`number`	—	—
`y`	`number`	—	—
`width`	`number`	—	—
`height`	`number`	`0`	—
`top`	`number`	`0`	—
`left`	`number`	—	—
`points`	`{ x: number; y: number }[]`	—	—
`payload`	`TooltipPayloadItem[]`	—	—
`labelKey`	`string`	—	Field on the datum shown in the axis pill.
`showAxisLabel`	`boolean`	`true`	Draw the hovered label as a pill on the x-axis. Turn off when the axis already prints that tick — otherwise the pill stacks on the label (e.g. "Aug 6" over "Aug 7").