Area Chart
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Area charts with stacked, gradient, pattern, and reveal variants
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.
<script lang="ts">
import { EvilAreaChart } from '$lib/components/evilcharts/charts/layerchart-area-chart';
import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script><EvilAreaChart {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}
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
Dither rendering
Set renderStyle="dither" on the existing chart root to paint its series with a responsive ordered-dither canvas while the SVG marks continue to own tooltips, selection, dots, and brush interaction. Use ditherVariant on an individual <Area /> to override the root texture.
The renderer is independently implemented for EvilCharts SV and inspired by Dither Kit by Boring Software.
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 LayerChart 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 LayerChart 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.