Momentum Chart

Shows a metric’s momentum with an animated value, percentage change, and trend line.

$264,802.43

+ $174,802.43(+194.22%)

+194.22% More than last week

Features

Animated value display that smoothly updates with chart interaction.
Dynamic delta and percentage indicators showing performance change.
Smooth trend line visualization for weekly momentum tracking.
Interactive hover behavior to inspect values across the timeline.

Installation

npm

npx shadcn@latest add https://charts.zenin.design/r/momentum-chart.json

Data Structure

const momentumData = [
  { day: "Mon", value: 90000 },
  { day: "Tue", value: 140000 },
  { day: "Wed", value: 175000 },
  { day: "Thu", value: 150000 },
  { day: "Fri", value: 110000 },
  { day: "Sat", value: 200000 },
  { day: "Sun", value: 264802.43 },
];

Props

This component does not require any props by default. The chart uses an internal dataset to demonstrate the momentum visualization.

If needed, you can extend the component by adding your own props such as custom data, colors, or formatting logic.

Usage

<MomentumCard />