Area Chart
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Static, beautifully designed area charts
Installation
Usage
The area chart is composable. <EvilAreaChart> is the container; drop in only the parts you need — <EvilAreaChart.Grid>, <EvilAreaChart.XAxis>, <EvilAreaChart.YAxis>, <EvilAreaChart.Legend>, <EvilAreaChart.Tooltip>, and one or more <EvilAreaChart.Area> — as children. Each <EvilAreaChart.Area> owns its variant, strokeVariant, and isClickable, so one chart can mix fills, strokes, and per-series interactivity.
import { EvilAreaChart } from "@/components/evilcharts/charts/recharts-area-chart";
import { type ChartConfig } from "@/components/evilcharts/ui/recharts-chart";<EvilAreaChart data={data} config={chartConfig} stackType="stacked">
<EvilAreaChart.Grid />
<EvilAreaChart.XAxis dataKey="month" />
<EvilAreaChart.YAxis />
<EvilAreaChart.Legend isClickable />
<EvilAreaChart.Tooltip />
<EvilAreaChart.Area dataKey="desktop" variant="gradient" strokeVariant="dashed" isClickable>
<EvilAreaChart.Dot variant="border" />
<EvilAreaChart.ActiveDot variant="colored-border" />
</EvilAreaChart.Area>
<EvilAreaChart.Area dataKey="mobile" variant="hatched" strokeVariant="solid" isClickable>
<EvilAreaChart.ActiveDot variant="colored-border" />
</EvilAreaChart.Area>
</EvilAreaChart>Interactive Selection
Add isClickable to any <Area> (and to <Legend>) to make series selectable, then handle events with the onSelectionChange callback on <EvilAreaChart>:
<EvilAreaChart
data={data}
config={chartConfig}
onSelectionChange={(selectedDataKey) => {
if (selectedDataKey) {
console.log("Selected:", selectedDataKey);
} else {
console.log("Deselected");
}
}}
>
<EvilAreaChart.XAxis dataKey="month" />
<EvilAreaChart.Legend isClickable />
<EvilAreaChart.Tooltip />
<EvilAreaChart.Area dataKey="desktop" variant="gradient" isClickable />
<EvilAreaChart.Area dataKey="mobile" variant="gradient" isClickable />
</EvilAreaChart>Loading State
Pass isLoading to show the loading skeleton, and curveType to shape it. This example uses curveType='bump' for a more realistic look.
Examples
Examples across different variants — mix stackType, curveType, strokeVariant, and areaVariant.
Gradient Colors
Curve Types
Stack Types
Stroke Variants
Area Variants
API Reference
The chart has several parts. Props below are grouped by component.
The root container. Owns the data, shared selection state, loading skeleton, and optional brush; everything visual is composed as children.
A single area series. Each <Area /> is self-contained, generating its own gradient/pattern definitions, 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. Both use the chart's flat default styling and forward every Recharts axis prop — dataKey, tickFormatter, tickMargin, and the rest pass straight through. Both hide while the chart loads, and <YAxis /> formats ticks as percentages when stackType="expanded".
The background grid lines. Defaults to horizontal-only dashed lines and forwards every Recharts CartesianGrid prop.
The hover tooltip. It reads the chart's selection state so its content dims unselected series.
The series legend. When isClickable is set, each entry toggles selection of its series.
An optional zoom brush below the chart. Include <EvilAreaChart.Brush /> to render it; dragging the range filters the main chart.