Primitive

Chart

Cashback projection chart with grid, marker, and projected line.

All components Registry setup

Preview

components/ui/chart.tsx

Animation

Line draw880msStart delay120msMarker snap260msMarker delay760msProjection draw660ms

$128.28 Total Cashback

Projected $348.38 by the end of the year

Plot only

Install

pnpm dlx shadcn@latest add @rhythmic-ui/chart

Chart API

Pass current and projected points with labels. Animation is enabled by default, and timings can be tuned or disabled.

<Chart
  title="$128.28 Total Cashback"
  subtitle="Projected $348.38 by the end of the year"
  currentPoints={[
    { x: 0, y: 10 },
    { x: 24, y: 42 },
    { x: 39, y: 48 },
    { x: 51.65, y: 51 },
  ]}
  projectedPoints={[
    { x: 51.65, y: 51 },
    { x: 76, y: 56 },
    { x: 100, y: 67 },
  ]}
/>

<Chart
  animate={{
    duration: 880,
    markerDelay: 760,
    projectedDuration: 660,
  }}
  currentPoints={currentPoints}
  projectedPoints={projectedPoints}
/>

<div className="h-40 w-full">
  <Chart
    variant="plot"
    currentPoints={currentPoints}
    projectedPoints={projectedPoints}
  />
</div>

Registry URL

Use through the configured namespace in consumer repos.

https://design.dev.rhythmic.io/r/chart.json