Back to Components

Line Chart

Charts

Smooth animated line charts for time-series data visualization with clean, minimal styling.

Installation

$npx linspo-ui add line-chart
Dependencies: lucide-react

Revenue Growth

Last 8 periods

94

+12.5%
JanFebMarAprMayJunJulAug

Props

PropTypeDefaultDescription
data*LineChartDataPoint[]Array of data points with label and value properties.
classNamestringAdditional CSS classes to apply to the container.
titlestringTitle displayed in the chart header.
metricstring"Revenue Growth"Label for the metric being displayed.
showGridbooleantrueWhether to show grid lines.
showDotsbooleantrueWhether to show data point dots.
areaFillbooleantrueWhether to fill the area under the line.
animatedbooleantrueWhether to animate on mount.
colorstring"hsl(221 83% 53%)"Color of the line and fill gradient.