Component reference
LineChart
Compare trends with linear segments, smooth curves and points.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Loading the interactive example?
Width adapts to the available space
"use client";
import { LineChart } from "@pimolu/react";
export function LineChartExample() {
const labels = ["Mon", "Tue", "Wed", "Thu", "Fri"];
const series = [{ name: "This week", values: [18, 24, 21, 32, 28] }];
return (
<LineChart
aria-label="Fictional LineChart dataset"
labels={labels}
series={series}
yAxisLabel="Requests per second"
showPoints
/>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Two reporting periods
Compare two named series without relying on the curve alone.
Visible observations
Show the measured values along a linear trend.
Positive and negative values
Keep a signed trend readable around zero.
Named-part customization
Style this chart directly through typed geometry and surface hooks.
Usage
Provide series and labels. curve="smooth" keeps the curve within adjacent values; showPoints makes individual observations visible. Missing observations create gaps.
Use valueFormatter for readable units. These charts do not implement zoom, pan or time-axis aggregation. Demo data is fictional.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluChartSeries
Type source| Name | Type | Default | Description |
|---|---|---|---|
nameRequired | string | — | Series name used by the legend and the data table. |
valuesRequired | number[] | — | One value per category. Missing trailing values are allowed. |
color | string | undefined | — | Explicit colour. Falls back to the chart palette and theme tokens. |
nameRequiredstringNo default extracted.
Series name used by the legend and the data table.
valuesRequirednumber[]No default extracted.
One value per category. Missing trailing values are allowed.
colorstring | undefinedNo default extracted.
Explicit colour. Falls back to the chart palette and theme tokens.
PimoluLineChartProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
classNames | PimoluClassNames<"chart"> | undefined | — | Additive classes for stable named parts, including composed descendants. Parts: area, axis, axisLabel, axisTitle, bar, canvas, centerLabel, centerValue, cursor, donutTrack, empty, grid, legend, legendItem, legendLabel, legendSwatch, legendValue, line, point, root, segment, srOnly, svg, tooltip, tooltipRow, valueLabel. Parts render only when the corresponding component or state is present. |
responsive | boolean | undefined | true | Fits the drawing coordinates to the container to keep text legible. Defaults to true. |
seriesRequired | PimoluChartSeries[] | [] | One or more series to draw. |
labels | string[] | undefined | "1", "2", .. | Category labels. Defaults to "1", "2", ... |
max | number | undefined | — | Upper bound of the value axis. Derived from the data when omitted. |
showGrid | boolean | undefined | true | Shows horizontal grid lines. Defaults to true. |
showPoints | boolean | undefined | false | Shows a point for each value. Defaults to false. |
curve | "linear" | "smooth" | undefined | linear | Linear segments or a smooth curve that stays within adjacent values. Defaults to linear. |
areaFill | "solid" | "gradient" | undefined | gradient; ignored by LineChart | AreaChart fill treatment. Defaults to gradient; ignored by LineChart. |
xAxisLabel | string | undefined | — | Optional title under the category axis. |
yAxisLabel | string | undefined | — | Optional title beside the value axis. |
width | number | undefined | — | Initial viewBox width, default 640 (240 for DonutChart). Bar/Line/Area measure their container by default; set responsive=false to retain this viewBox width and the original fluid aspect ratio. |
height | number | undefined | 320 (or 240 for the donut) | viewBox height. Responsive Cartesian charts retain this drawing height. Defaults to 320 (or 240 for the donut). |
showLegend | boolean | undefined | — | Shows the legend below the chart. |
showTooltip | boolean | undefined | true | Enables pointer, touch and arrow-key exploration. Defaults to true. |
interactionLabel | string | undefined | — | Localized instructions for keyboard exploration. |
valueFormatter | ((value: number) => string) | undefined | — | Formats values in the axis, value labels, legend and data table. |
emptyLabel | string | undefined | — | Text announced when there is nothing to draw. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
classNamesPimoluClassNames<"chart"> | undefinedNo default extracted.
Additive classes for stable named parts, including composed descendants. Parts: area, axis, axisLabel, axisTitle, bar, canvas, centerLabel, centerValue, cursor, donutTrack, empty, grid, legend, legendItem, legendLabel, legendSwatch, legendValue, line, point, root, segment, srOnly, svg, tooltip, tooltipRow, valueLabel. Parts render only when the corresponding component or state is present.
responsiveboolean | undefinedDefault: true
Fits the drawing coordinates to the container to keep text legible. Defaults to true.
seriesRequiredPimoluChartSeries[]Default: []
One or more series to draw.
labelsstring[] | undefinedDefault: "1", "2", ..
Category labels. Defaults to "1", "2", ...
maxnumber | undefinedNo default extracted.
Upper bound of the value axis. Derived from the data when omitted.
showGridboolean | undefinedDefault: true
Shows horizontal grid lines. Defaults to true.
showPointsboolean | undefinedDefault: false
Shows a point for each value. Defaults to false.
curve"linear" | "smooth" | undefinedDefault: linear
Linear segments or a smooth curve that stays within adjacent values. Defaults to linear.
areaFill"solid" | "gradient" | undefinedDefault: gradient; ignored by LineChart
AreaChart fill treatment. Defaults to gradient; ignored by LineChart.
xAxisLabelstring | undefinedNo default extracted.
Optional title under the category axis.
yAxisLabelstring | undefinedNo default extracted.
Optional title beside the value axis.
widthnumber | undefinedNo default extracted.
Initial viewBox width, default 640 (240 for DonutChart). Bar/Line/Area measure their container by default; set responsive=false to retain this viewBox width and the original fluid aspect ratio.
heightnumber | undefinedDefault: 320 (or 240 for the donut)
viewBox height. Responsive Cartesian charts retain this drawing height. Defaults to 320 (or 240 for the donut).
showLegendboolean | undefinedNo default extracted.
Shows the legend below the chart.
showTooltipboolean | undefinedDefault: true
Enables pointer, touch and arrow-key exploration. Defaults to true.
interactionLabelstring | undefinedNo default extracted.
Localized instructions for keyboard exploration.
valueFormatter((value: number) => string) | undefinedNo default extracted.
Formats values in the axis, value labels, legend and data table.
emptyLabelstring | undefinedNo default extracted.
Text announced when there is nothing to draw.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Give the chart a descriptive aria-label including its units. A hidden data table provides the individual observations.
- One Tab stop enters exploration. Arrow keys move between observations, Home/End jump, and Escape closes the tooltip while keeping focus.