M
MetricUI
Charts

LineChart

A line chart — AreaChart with area fill disabled. Shows clean unbroken lines by default.

import { LineChart } from "metricui";

Use LineChart for clean trend visualization without filled areas. It is a thin wrapper around AreaChart with area fill disabled and points enabled by default. Supports reference lines, threshold bands, comparison overlays, and all the same formatting options. For filled area visualization, use AreaChart instead.

Basic Example

Active Users
<LineChart
  data={[{
    id: "Users",
    data: [
      { x: "Jan", y: 820 },
      { x: "Feb", y: 930 },
      { x: "Mar", y: 1040 },
      // ...
    ],
  }]}
  title="Active Users"
  format={{ style: "number", compact: true }}
/>

Multi-Series

Pass multiple series to compare trends side by side. The legend is automatically shown for multi-series data and supports toggling individual series on and off.

Traffic by Device
<LineChart
  data={[
    { id: "Desktop", data: [...] },
    { id: "Mobile", data: [...] },
    { id: "Tablet", data: [...] },
  ]}
  title="Traffic by Device"
  format={{ style: "number", compact: true }}
  pointSize={4}
/>

Comparison Overlay

Pass comparisonData to render a dashed overlay of a previous period. The comparison lines use 50% opacity so the current period stays prominent.

Revenue vs Last Year
Previous period
<LineChart
  data={currentPeriod}
  comparisonData={previousPeriod}
  title="Revenue vs Last Year"
  format={{ style: "currency" }}
/>

Reference Lines & Thresholds

Add horizontal or vertical referenceLines for targets and benchmarks. Use thresholds to highlight Y-axis ranges.

Revenue with Target
<LineChart
  data={revenueData}
  title="Revenue with Target"
  format={{ style: "currency" }}
  referenceLines={[
    { axis: "y", value: 60000, label: "Target", color: "#EF4444", style: "dashed" },
  ]}
  thresholds={[
    { from: 40000, to: 55000, color: "#F59E0B", label: "Warning zone" },
  ]}
/>

Data States

Every component handles loading, empty, error, and stale states. Pass individual props or use the grouped state prop.

Loading

Error

Failed to load data

// Loading state
<LineChart data={[]} title="Users" loading />

// Error state
<LineChart data={[]} title="Users" error={{ message: "Failed to load" }} />

Props

PropTypeDescription
data*
{ id: string; data: { x: string | number; y: number | null }[] }[]

Array of data series.

index
string

Column key for the x-axis labels. Used with the unified flat-row data format. If omitted with categories, auto-inferred as the first string column.

categories
Category[]

Columns to plot as series. Accepts plain strings or CategoryConfig objects ({ key, label?, format?, color?, axis? }). If omitted with index, auto-inferred as all number columns.

simpleData
{ label: string; value: number | null }[]

Simple data format for single-series.

simpleDataId
string

Series name when using simpleData.

comparisonData
{ id: string; data: { x: string | number; y: number | null }[] }[]

Previous period data as dashed overlay.

title
string

Chart card title.

subtitle
string

Chart card subtitle.

description
string | React.ReactNode

Description popover.

footnote
string

Footnote.

action
React.ReactNode

Action slot.

format
FormatOption

Format for Y-axis values and tooltips.

height
number

Chart height in px.

curve
CurveType

Curve interpolation.

enablePoints
boolean

Show data points. Note: default pointSize is 0 so they are invisible until sized up.

stacked
boolean

Stack multiple series.

lineWidth
number

Line width in px.

lineStyle
"solid" | "dashed" | "dotted"

Line stroke style.

pointSize
number

Point radius in px. 0 hides dots but keeps hover mesh active.

colors
string[]

Series colors.

seriesStyles
Record<string, SeriesStyle>

Per-series style overrides.

referenceLines
ReferenceLine[]

Reference lines.

thresholds
ThresholdBand[]

Threshold bands.

legend
boolean | LegendConfig

Legend configuration.

xAxisLabel
string

X-axis label.

yAxisLabel
string

Y-axis label.

rightAxisSeries
string[]

Series assigned to right Y-axis.

rightAxisFormat
FormatOption

Right Y-axis format.

rightAxisLabel
string

Right Y-axis label.

onPointClick
(point: { id: string; value: number; label: string; seriesId: string; x: string | number; y: number }) => void

Click handler.

dense
boolean

Compact layout.

chartNullMode
ChartNullMode

Null handling mode.

animate
boolean

Enable/disable animation.

variant
CardVariant

Card variant (supports custom strings). CSS-variable-driven via [data-variant].

className
string

Additional CSS class names.

classNames
{ root?: string; header?: string; chart?: string; legend?: string }

Sub-element class name overrides.

id
string

HTML id attribute.

data-testid
string

Test id.

loading
boolean

Loading state.

empty
EmptyState

Empty state.

error
ErrorState

Error state.

stale
StaleState

Stale data indicator.

Data Shape

// Same as AreaChart
type Datum = { x: string | number; y: number | null };
type SeriesData = { id: string; data: Datum[] };

Notes

  • LineChart is Omit<AreaChartProps, 'enableArea' | 'gradient' | 'areaOpacity'>.
  • enablePoints defaults to true but pointSize defaults to 0, resulting in invisible points. Set pointSize > 0 to show dots.
  • All AreaChart features (dual axis, stacking, comparison, etc.) are available.

Playground

Experiment with every prop interactively. Adjust the controls on the right to see the component update in real time.

Live Preview

User Growth

Monthly active users

Code

<LineChart
  data={[{ id: "Revenue", data: [...] }]}
  title="User Growth"
  subtitle="Monthly active users"
  format={{ style: "currency" }}
  enablePoints={false}
/>

Props

Adjust props to see the chart update in real time

Switch between sample datasets

Applied to Y-axis labels and tooltips

Line interpolation method

Stroke width in px

Stroke dash pattern