Components

Line Chart

Compare observations in order, inspect every series together, and keep missing values visible. Triangular markers and gradient areas come ready to use.

Install

npx mario-charts@latest add line-chart

Playground

Compare curves, missing observations, loading, and multiple series.

Settings

The same chart through every state.

DataStateCurve

Multiple seriesShow trianglesShow areaConnect missing values

Animate

Monthly revenue

January–June · USD

Waiting for chart space

Hover or tap to inspect. Use ← → for observations, ↑ ↓ for series, and Enter to select.

tsx

import { LineChart } from "@/components/charts/line-chart";

const data = [
  { month: "Jan", revenue: 4500, costs: 3200 },
  { month: "Feb", revenue: 5200, costs: 3800 },
  { month: "Mar", revenue: null, costs: 3400 },
  { month: "Apr", revenue: 6100, costs: 4100 },
];

export function RevenueChart() {
  return (
    <LineChart
      data={data}
      x="month"
      y={["revenue", "costs"]}
      showGrid
      showLegend
      valueFormatter={(value) => "$" + value.toLocaleString("en-US")}
      ariaLabel="Revenue and costs by month"
    />
  );
}

Choose what the line means

Curve	Behavior
Monotone	Smooth interpolation that avoids creating peaks or troughs between observations.
Linear	Straight segments between measured values.
Step	Horizontal plateaus with a change halfway between categories.
Natural	A natural cubic spline. It can overshoot between observations; choose monotone when that would be misleading.

Data and state contracts

Missing is not zero

Use null or undefined for an unmeasured value. Lines and areas break at those observations by default. Set connectNulls to true only when joining them is intentional. Malformed numbers show an actionable error.

Upgrading an existing chart? connectNulls previously defaulted to true; pass it explicitly to keep bridging gaps. Invalid numeric strings must be normalized before rendering.

A stable frame

Loading, error, empty, and ready keep the requested height. Retain data while refreshing for an identical skeleton. Before data arrives, the skeleton uses neutral placeholders.

One comparable unit

All series share one Y-axis. Compare values in the same unit. X labels are equally spaced categories, even when they contain dates; irregular time intervals need a continuous time scale.

Inspect without visible dots

The entire category band supports hover, touch, and keyboard inspection. All available series appear together. An isolated observation remains visible, including when showDots is false.

API Reference

Prop	Type	Default	Description
`data`Required	readonly T[]	—	Array of data objects to display in the chart
`x`Required	keyof T	—	Key from data object to use for x-axis labels
`y`Required	keyof T \| readonly (keyof T)[]	—	Key(s) from data object to use for y-axis values. Single key for one line, array for multiple lines
`colors`	readonly string[]	DEFAULT_COLORS	Array of colors to use for lines (cycles through for multiple series)
`strokeWidth`	number	2	Width of the line stroke in pixels
`curve`	'linear' \| 'monotone' \| 'natural' \| 'step'	'monotone'	Type of curve interpolation for the line
`showDots`	boolean	true	Show triangular markers. Isolated observations remain visible even when dots are hidden.
`showArea`	boolean	false	Fill each contiguous segment with a gradient, closing at zero or the nearest domain edge.
`connectNulls`	boolean	false	Opt in to connecting observations across missing values. Gaps remain visible by default.
`height`	number	300	Total frame height in pixels, including the legend, in every state
`loading`	boolean	false	Show loading state with animated skeleton
`error`	string \| null	null	Error message to display
`animation`	boolean	true	Reveal lines, areas, and markers together from left to right. Respects reduced motion.
`onPointClick`	(data: T, index: number, series?: string) => void	—	Callback fired when a point is clicked
`showGrid`	boolean	false	Show horizontal grid lines. Y-axis tick labels remain visible independently.
`gridStyle`	'solid' \| 'dashed' \| 'dotted'	'dashed'	Style of the grid lines when showGrid is enabled
`showLegend`	boolean	false	Show legend below the chart for multi-series data
`className`	string	—	Additional CSS classes to apply to the container
`valueFormatter`	(value: number) => string	—	Format tooltip values and accessible labels; also ticks unless overridden.
`axisValueFormatter`	(value: number) => string	—	Optional compact tick formatting.
`ariaLabel`	string	—	Accessible name for the chart.
`description`	string	—	Context, units, or caveats announced with the chart.
`showAreaForSeries`	readonly number[]	—	Indices in the original y array that receive an area fill when showArea is enabled.
`tooltipRenderer`	TooltipRenderer<LineChartTooltipData<T>>	—	Custom category tooltip with parsed and original values for each available series.