Line Chart
Line Chart visualizes trends and metrics using continuous lines across a variety of analytical layout types with RTL support.
Installation
npx sdaia-ui@latest add line-chart
Usage
import { LineChart } from "@/components/ui/line-chart"<LineChart type="insight" />Examples
Basic Metric
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.
'use client'; import { LineChartIndicator } from 'sdaia-ui/components/LineChartIndicator/LineChartIndicator'; export default function LineChartIndicator1() {Top-Right Trend
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.
'use client'; import { LineChartIndicator } from 'sdaia-ui/components/LineChartIndicator/LineChartIndicator'; export default function LineChartIndicator2() {Inline Trend
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.
'use client'; import { LineChartIndicator } from 'sdaia-ui/components/LineChartIndicator/LineChartIndicator'; export default function LineChartIndicator3() {Trailing Trend
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.
'use client'; import { LineChartIndicator } from 'sdaia-ui/components/LineChartIndicator/LineChartIndicator'; export default function LineChartIndicator4() {Centered KPI
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.
'use client'; import { LineChartIndicator } from 'sdaia-ui/components/LineChartIndicator/LineChartIndicator'; export default function LineChartIndicator5() {Chart with Bottom Summary
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.
'use client'; import { LineChartIndicator } from 'sdaia-ui/components/LineChartIndicator/LineChartIndicator'; export default function LineChartIndicator6() {Bottom Curve
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.
'use client'; import { LineChartIndicator } from 'sdaia-ui/components/LineChartIndicator/LineChartIndicator'; export default function LineChartIndicator7() {Dual Series Stacked
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.
'use client'; import { LineChartIndicator } from 'sdaia-ui/components/LineChartIndicator/LineChartIndicator'; export default function LineChartIndicator8() {Large Chart with Dual Metrics
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.
'use client'; import { LineChartIndicator } from 'sdaia-ui/components/LineChartIndicator/LineChartIndicator'; export default function LineChartIndicator9() {Titled Dashboard Card
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.
'use client'; import { LineChartIndicator } from 'sdaia-ui/components/LineChartIndicator/LineChartIndicator'; export default function LineChartIndicator10() {Compact Inline Row
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.
'use client'; import { LineChartIndicator } from 'sdaia-ui/components/LineChartIndicator/LineChartIndicator'; export default function LineChartIndicator11() {API Reference
LineChartProps
Props for the LineChart component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'Insight' | 'Comparison' | 'Score' | 'Forecast' | 'Insight' | optional |
xAxisData | '3 Days' | '5 Work Days' | '7 Week Days' | '12 Months' | '7 Week Days' | optional |
rtl | boolean | false | optional |
title | string | - | optional |
height | number | - | 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 |