Component reference
AreaChart
Show the shape and magnitude of a trend with filled curves.
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 { useState } from "react";
import { AreaChart, SegmentedControl } from "@pimolu/react";
export function AreaChartExample() {
const months = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const revenue = [34220, 37850, 35580, 41960, 42860, 48200];
const previous = [22300, 21800, 23600, 25900, 27800, 30200];
const [period, setPeriod] = useState("half");
const count = period === "quarter" ? 3 : 6;
return (
<div className="space-y-6">
<SegmentedControl
aria-label="Revenue reporting period"
value={period}
onValueChange={setPeriod}
options={[
{ value: "quarter", label: "Last quarter" },
{ value: "half", label: "Last 6 months" },
]}
/>
<AreaChart
aria-label="Monthly recognized revenue in USD, fictional reporting data"
labels={months.slice(-count)}
series={[
{ name: "2025", values: revenue.slice(-count) },
{ name: "2024", values: previous.slice(-count) },
]}
curve="smooth"
areaFill="gradient"
valueFormatter={(value) => `$${(value / 1000).toFixed(1)}k`}
/>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Solid fill
Use a flat fill instead of the default gradient.
Smooth trend
Follow a bounded curve through measured observations.
Static presentation
Disable exploration when a static data illustration is sufficient.
Named-part customization
Style this chart directly through typed geometry and surface hooks.
Usage
Provide series and labels. The default gradient emphasizes trends; areaFill="solid" gives a flat fill. Multiple areas overlap rather than stack.
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.
PimoluAreaChartProps
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.