Spark UI
Back to UI Kit

Trend Path

A smooth line chart with rounded stroke caps and a dual/single series toggle for comparing two trends.

Interactive Stage Preview

Customize

8 options
Accent Color
Data Points
6
Line Thickness
3
Curve
Point Dots
Baseline Series
Grid Lines
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add mono-rounded-spline-line

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#ff8a3d'Primary series color.
pointsnumber6Number of points plotted along the line.
strokeWidthnumber3Stroke width of the active line.
curvestring'monotone'Interpolation used between points.
showDotsbooleantrueDraw a dot on every data point.
showBaselinebooleantrueShow the dashed comparison line.
showGridbooleantrueShow the dashed background grid.
speednumber100Playback speed of entry and transition animations, as a percentage.