Overview
Use an area chart to show how a value changes over time when its magnitude matters as much as the trend. Stack related series to show how each one contributes to a total. Use a line chart instead when the filled area would make close comparisons harder.
Anatomy
AreaChart owns the data, configuration, selection, and loading state. Add axes and a grid for context, one or more Area parts for the series, and optional Legend, Tooltip, and Brush parts for exploration.
Accessibility
Canvas charts need a nearby text summary or data table when exact values or trends are important. Use clear series labels and more than color to distinguish overlapping areas. Tooltip, brush, and direct series selection are pointer-operated; provide equivalent controls when those interactions are required.
Installation
Usage
<AreaChart> owns the data, theme configuration, and shared state. Add axes, a grid, legend, tooltip, brush, and one or more <AreaChart.Area> parts as needed. Each Area sets its own fill, stroke, and selection behavior.
import { AreaChart, type ChartConfig } from "honestui/charts";<AreaChart data={data} config={chartConfig} stackType="stacked">
<AreaChart.Grid />
<AreaChart.XAxis dataKey="month" />
<AreaChart.Brush />
<AreaChart.Legend isClickable />
<AreaChart.Tooltip />
<AreaChart.Area dataKey="finished" variant="gradient" strokeVariant="dashed" isClickable />
<AreaChart.Area dataKey="scrap" variant="hatched" strokeVariant="solid" isClickable />
</AreaChart>The root compiles its children into an ECharts option and renders the plot on a canvas. The config prop maps each series data key to its label and theme colors. See Chart Config for the complete shape.
Canvas rendering has two implementation details to keep in mind: multi-color gradients bake into a texture at render size (visually equivalent, rebuilt on resize), and the zoom brush is a themed mini chart driven by ECharts' native dataZoom instead of the custom HonestBrush.
Loading State
Pass isLoading to show an animated skeleton; use loadingPoints to set how many points it draws.
Examples
Change variant and strokeVariant on an <Area>, or curveType and stackType on the chart, to restyle it.
Hover Highlight
Buffer Line
With enableBufferLine, each area's last segment renders as a dashed tail while the rest stays solid, useful for marking projected, estimated, or incomplete data at the end of a series, as in financial charts and forecasting dashboards.
Hover Reveal
With enableHoverReveal, hovering colors each area's line and fill only up to the pointer's position and mutes everything past it to a neutral gray, with the active dot riding the cursor, a scrubbing effect for reading a series left-to-right. When not hovering, the chart looks completely normal.
Gradient Colors
Curve Types
Stack Types
Stroke Variants
Area Variants
API Reference
Props are grouped by the part they belong to. On canvas each part is declarative config the root compiles.
The root container. It owns the data, shared selection state, loading skeleton, and optional native dataZoom brush. Everything visual is composed as its children and compiled into the ECharts option.
A single area series. Each <Area /> carries its own fill and stroke config, so a chart can hold any number, each with its own variant, stroke, and clickability.
Point markers composed inside an <Area />. <Dot /> is the resting marker; <ActiveDot /> is the hovered marker. They render nothing on their own, the parent <Area /> reads their variant.
The category and value axes. Include <XAxis /> or <YAxis /> to show each; omit either to hide it. Both hide automatically while loading, and <YAxis /> formats ticks as percentages when stackType="expanded".
The background grid lines. Include it to draw the dashed horizontal split lines; omit it and they don't. Takes no props.
The hover tooltip. Include it to enable the tooltip; omit it and none shows. It reads selection state, dimming unselected series in its content.
The series legend, rendered as HTML above the canvas. Include it to show the legend; omit it and none shows. When isClickable is set, each entry toggles selection of its series.
An optional zoom brush below the chart, a themed mini chart driven by ECharts' native dataZoom. Include <AreaChart.Brush /> to render it; dragging the range filters the main chart.