for all time

90,744

16,520

NewData Display · added Sep 21

Chart Card

A stats card whose bars show their value as you move across them.

Install it in one line

npx devignerui add chart-card

Writes components/ui/chart-card.tsx and lists what it needs.

First time here

npx devignerui init

Or by hand

<ChartCard data={sales} />

<ChartCard data={sales} renderTooltip={({ point }) => <strong>{point.value}</strong>} />

data-

ChartCardPoint[]

Chart data.

activeId-

ChartCardActiveId

Controlled point.

defaultActiveId-

ChartCardActiveId

Initial point.

onActiveChange-

function

Active point callback.

actions-

ChartCardAction[]

Actionable header actions.

renderPoint-

function

Point slot.

renderTooltip-

function

Tooltip slot.

renderActions-

function

Actions slot.

classNames-

ChartCardClassNames

Slot classes.

slotProps-

ChartCardSlotProps

Slot attributes.