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

Examples

ChartContainer

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";

Radial bar (primitive)

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>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ChartDefault layout:inline style:chart {
  label "Series"
  text "4"
  text "8"
  text "6"
}

page "/audit/chart/default" type:custom {
  use ChartDefault
}

API Reference

Generated from the component's exported types.

ChartCursorProps

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").