build69
build69  /  Components  /  Charts  /  LineChart

LineChart

v1.0.4Updated 25 Jul 2026

Recharts-backed line chart with multi-series, area fill, straight-segment, and dashed-forecast modes. The default time-series chart.

Preview

Live · 12 stories
DefaultOpen ↗
Why this is recommendedchartlinerechartstime-series+3

The default, out-of-the-box LineChart.

Recommended for+14
  • Time-series trends
  • KPI history
  • Multi-line comparisons
Tags+6
chartlinerechartstime-seriesdata-vizforecastdefault
Features+4
  • Multi-series
  • Area fill (gradient or solid)
  • Straight / monotone interpolation
  • Forecast tail (dashed segment)
  • MiniLine variant for inline
  • i18n: numbers/axis values format per LocaleProvider locale
Not recommended for−2
  • Categorical comparison (use BarChart)
  • Part-of-whole (use PieChart)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "LineChart" })

Usage

import { LineChart } from '@/components/data-viz/line-chart';

<LineChart data={mrr} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
data

Rows of time-ordered data

object[]yes
series

Multi-series config

LineSeries[]

Related