Slope chart

Before and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.

$npx shadcn@latest add @silicon-ui/slope-chart

datachartnew

Installation

$npx shadcn@latest add @silicon-ui/slope-chart

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/slope-chart/slope-chart.tsx
- components/silicon-ui/slope-chart/slope-chart.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { SlopeChart } from "@/components/silicon-ui/slope-chart/slope-chart";

Prop	Type	Default
`data*`	`SlopeItem[]`	—
`label*` What is measured, such as "Conversion rate by channel". Names the chart for assistive technology.	`string`	—
`startLabel*` Heading of the first column, such as "Q1".	`string`	—
`endLabel*` Heading of the second column, such as "Q2".	`string`	—
`formatValue`	`(value: number) => string`	—
`formatChange` Formats the change in the tooltip. Defaults to the difference in formatValue's terms.	`(change: number, item: SlopeItem) => string`	—
`height` Plot height in pixels. Defaults to 44 pixels per item.	`number`	—
`highlightKey` The item drawn in the accent, such as the one the story is about.	`string \| null`	`null`
`activeKey` Controlled item in focus. The others fade while one is in focus.	`string \| null`	—
`onActiveChange`	`(key: string \| null) => void`	—
`ranks` Rank movement beside each end value.	`boolean`	`true`
`emptyLabel`	`string`	`"No data"`
`ref`	`Ref<HTMLElement>`	—
`className`	`string`	—