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.

Library

Arc Library

Framework

React

Type

ui

License

MIT

Dependencies

motion

Install

npx shadcn@latest add https://uiarc.dev/r/slope-chart.json

Files

• registry/components/slope-chart/slope-chart.tsx
• registry/components/slope-chart/slope-chart.module.css
• registry/motion-tokens.ts
• lib/motion-tokens.ts

Source

https://github.com/kuratlielia/arc-library

Categories

• Chart Components
• React Chart Components
• Animated Chart Components
• Data Display Components
• React Data Display Components
• Animated Data Display Components

More from Arc Library

• Activity heatmap
• Bar chart
• Brush chart
• Donut chart
• Gauge
• Line chart
• Ridgeline
• Sparkline
• Streamgraph
• Treemap
• Usage meter
• Waffle chart