Line Chart

LineChart renders connected line series via Recharts. It is the line primitive used inside Chart — use it directly when you need per-series styling (dashed lines, custom widths) or click handlers.

Each series is defined by a LineSeriesConfig ({ key, label?, color, dashed?, lineWidth?, unit? }).
An invisible wide hit area sits along each line so tooltips track accurately even between data points.
dashed: true renders a dashed stroke — ideal for forecast or projected series alongside a solid actual.
showGradient fills the area under each line with a gradient (on by default).
onDataPointClick, onXAxisTickClick, and onYAxisTickClick all expose the native mouse event.

Import

import { LineChart } from "h2o-library/charts";

Usage

Basic

Multiple series with mixed solid/dashed strokes — useful for actual vs. forecast.

Case stats

Actual

Forecast

const data = [
  { x: "Jan", actual: 4000, forecast: 2400 },
  { x: "Feb", actual: 3000, forecast: 1398 },
  { x: "Mar", actual: 2000, forecast: 9800 },
];

<LineChart
  data={data}
  lines={[
    { key: "actual", label: "Actual", color: "#041957" },
    { key: "forecast", label: "Forecast", color: "#3767F6", dashed: true },
  ]}
/>;

Single Series

A single line works just as well — the gradient fill highlights the area under the curve.

Quarterly revenue

<LineChart
  data={data}
  lines={[
    { key: "revenue", label: "Revenue", color: "#041957", unit: "K USD" },
  ]}
  showTooltipLabel
/>;

Without Gradient

showGradient={false} switches off the area fill — best for dense charts with three or more overlapping lines, where the stacked gradients would otherwise clutter the view.

Sessions by platform

Web

Mobile

Desktop

<LineChart
  data={data}
  lines={[
    { key: "web", label: "Web", color: "#041957" },
    { key: "mobile", label: "Mobile", color: "#3767F6" },
    { key: "desktop", label: "Desktop", color: "#9FB7FF" },
  ]}
  showGradient={false}
/>;

showTooltipLabel includes the X-axis category in the hover tooltip, and unit on a series appends a suffix to the value.

Request latency

p50

p95

<LineChart
  data={data}
  lines={[
    { key: "p50", label: "p50", color: "#041957", unit: "ms" },
    { key: "p95", label: "p95", color: "#e94040", unit: "ms" },
  ]}
  showTooltipLabel
/>;

Custom Line Widths

Use lineWidth to emphasize the primary series and de-emphasize secondary ones — handy for narrative dashboards where one metric is the headline.

Growth

Active users

New sign-ups

<LineChart
  data={data}
  lines={[
    { key: "primary", label: "Active users", color: "#041957", lineWidth: 3 },
    { key: "secondary", label: "New sign-ups", color: "#9FB7FF", lineWidth: 1 },
  ]}
/>;

Click Events

onDataPointClick, onXAxisTickClick, and onYAxisTickClick all expose the native mouse event so you can stop propagation when needed.

Daily visits — click a point or tick

<LineChart
  data={data}
  lines={lines}
  onDataPointClick={(point, index, dataKey, e) => {
    e.stopPropagation();
    console.log(dataKey, point);
  }}
  onXAxisTickClick={(value, e) => {
    e.stopPropagation();
    console.log("tick:", value);
  }}
/>;

Playground

Loading playground…

Keyboard

When onDataPointClick, onXAxisTickClick, or onYAxisTickClick is set, the corresponding SVG overlay labels / points receive tabIndex={0} and role="button". Use Tab to reach them and Enter or Space to trigger the handler.

Props

LineChart

Prop	Type	Default	Description
`data`*	`LineChartDataPoint[]`	—	Array of data objects. Each must have an x field for the category axis and numeric fields matching line keys.
`lines`*	`LineSeriesConfig[]`	—	Series definitions — each specifies the data key, color, and optional styling.
`height`	`number`	`400`	Height of the chart in pixels.
`showGrid`	`boolean`	`true`	Renders horizontal grid lines behind the chart.
`showLegend`	`boolean`	`false`	Shows the built-in Recharts legend.
`showGradient`	`boolean`	`true`	Fills the area under each line with a gradient.
`showTooltipLabel`	`boolean`	`false`	Includes the X-axis category value in the hover tooltip.
`className`	`string`	`undefined`	Additional CSS class for the container div.
`onDataPointClick`	`(point, index, dataKey, event) => void`	`undefined`	Fired when a data-point circle is clicked. Receives the data point, its index, the series key, and the native mouse event.
`onXAxisTickClick`	`(value, event) => void`	`undefined`	Fired when an X-axis tick label is clicked.
`onYAxisTickClick`	`(value, event) => void`	`undefined`	Fired when a Y-axis tick label is clicked.

LineSeriesConfig

Prop	Type	Default	Description
`key`*	`string`	—	Key in the data object this line reads from.
`color`*	`string`	—	Stroke color (hex, hsl, or any CSS color).
`label`	`string`	`key`	Human-readable name shown in legend and tooltip.
`dashed`	`boolean`	`false`	Renders the line with a dashed stroke pattern.
`lineWidth`	`number`	`2`	Stroke width in pixels.
`unit`	`string`	`undefined`	Unit suffix appended in the tooltip.

LineChartDataPoint

Prop	Type	Default	Description
`x`*	`string`	—	Category label shown on the X axis.
`[key]`	`number \| string \| undefined`	`—`	Numeric values for each series, keyed by the corresponding LineSeriesConfig.key. Undefined values create a gap in the line.

Design Guidelines

Use line charts for time-series data where trends matter more than individual values.
Use dashed: true for forecast or projected series so they're visually distinct from actuals.
Set showGradient: false when rendering many overlapping lines — gradients compound and add visual noise.
Use lineWidth to emphasize a primary series and de-emphasize secondary ones in narrative dashboards.
For a polished card with built-in title and KPIs, prefer the Chart wrapper.

Accessibility

Tooltips appear on hover and are not keyboard-accessible by default.
Provide a companion data table when chart data is critical for screen reader users.
onDataPointClick makes individual points interactive — pair with page-level keyboard handlers if you need keyboard parity.