Line Chart visualizes trends and metrics using continuous lines across a variety of analytical layout types with RTL support.
Loading demo: line-chart-real-world
npx sdaia-ui@latest add line-chart
import { LineChart } from "@/components/ui/line-chart"<LineChart type="insight" />A quiet, neutral card with a label and value on the left and a muted grey smooth line chart on the right. No trend badge. Use this for baseline metrics where no directional emphasis is needed.
Loading demo: line-chart-indicator-1
A two-row layout: label and trend badge sit at the top in opposite corners, with the value and positive chart side-by-side below. Use this when the trend percentage should read as a header before the value.
Loading demo: line-chart-indicator-2
Label at the top, value and trend badge inline at the bottom-left, and a noisy positive green chart filling the right side. Use this for volatile metrics where the graph texture signals activity.
Loading demo: line-chart-indicator-3
Label sits above a single row containing the value, an expanding chart, and a trend badge anchored at the far end. Use this when the trend should feel like a conclusion after the data.
Loading demo: line-chart-indicator-4
Label, value, and trend badge are all center-aligned stacked vertically, with a tall full-width noisy chart expanding below. Use this as a hero card for a primary KPI with full chart emphasis.
Loading demo: line-chart-indicator-5
A stacked layout: label, value + trend badge, a full-width smooth tall chart, then a secondary label + value row at the very bottom. Use this when a secondary reference figure is needed below the chart.
Loading demo: line-chart-indicator-6
Label at the top, value and trend badge inline, then a tall full-width smooth line chart anchoring the bottom of the card. Use this as the standard metric-plus-chart card with a clean bottom anchor.
Loading demo: line-chart-indicator-7
Two stacked label + value pairs on the left (primary and subtle) with a comparison line chart filling the right side. Use this for side-by-side comparison of two related metrics.
Loading demo: line-chart-indicator-8
A tall comparison chart spans the full width at the top, then two metric columns (each with label, value, and trend badge) sit below. Use this for chart-first layouts where the trend lines are the main story.
Loading demo: line-chart-indicator-9
A title and date chip sit at the top as a header. Below, a metric label, value, and trend badge appear on the left with a noisy line chart on the right. Use this for dashboard cards that need a title and date context.
Loading demo: line-chart-indicator-10
A three-column inline layout: label + notes text on the left, a small mini chart in the center, and value + trend badge aligned to the right. Use this for dense list-style dashboards where space is limited.
Loading demo: line-chart-indicator-11
Props for the LineChart component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'Insight' | 'Comparison' | 'Score' | 'Forecast' | 'Insight' | optional |
xAxisData | XAxisDataType | '7 Week Days' | optional |
rtl | boolean | false | optional |
title | string | — | optional |
height | number | — | optional |
graphStyle | 'noisy' | 'smooth' | 'elastic' | 'smooth' | optional |
showLegend | boolean | true | optional |
legendPosition | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right' | 'bottom-center' | optional |
showYAxis | boolean | true | optional |
showXAxis | boolean | true | optional |
showGridLines | boolean | true | optional |
showHoverIndicator | boolean | true | optional |
showAreaFill | boolean | true | optional |
series1Color | string | var(--color-line-chart-indicator-line) | optional |
series2Color | string | rgba(165,123,186,1) | optional |
series1 | number[] | — | optional |
series2 | number[] | — | optional |
goal | number | — | optional |
past | number[] | — | optional |
future | number[] | — | optional |
splitIndex | number | — | optional |
series1Label | string | — | optional |
series2Label | string | — | optional |
goalLabel | string | — | optional |
forecastLabel | string | — | optional |