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 powered by Apache ECharts
Installation
Usage
The ECharts area chart is composable. <EChartsAreaChart> is the container, and every part hangs off it as a compound member — <EChartsAreaChart.Grid>, <EChartsAreaChart.XAxis>, <EChartsAreaChart.YAxis>, <EChartsAreaChart.Legend>, <EChartsAreaChart.Tooltip>, <EChartsAreaChart.Brush>, and one or more <EChartsAreaChart.Area> — so a single import gives you the whole chart. Each <Area> sets its own variant, strokeVariant, and isClickable, so one chart can mix fills, strokes, and selective interactivity.
<script lang="ts">
import {
EChartsAreaChart,
type ChartConfig
} from '$lib/components/evilcharts/charts/echarts-area-chart/index.js';
</script><EChartsAreaChart {data} config={chartConfig} stackType="stacked">
<EChartsAreaChart.Grid />
<EChartsAreaChart.XAxis dataKey="month" />
<EChartsAreaChart.Brush />
<EChartsAreaChart.Legend isClickable />
<EChartsAreaChart.Tooltip />
<EChartsAreaChart.Area dataKey="desktop" variant="gradient" strokeVariant="dashed" isClickable />
<EChartsAreaChart.Area dataKey="mobile" variant="hatched" strokeVariant="solid" isClickable />
</EChartsAreaChart>The difference is under the hood: these compound children are declarative configuration slots rather than visual DOM nodes. The root reads their props and compiles an ECharts option, which ECharts paints with Canvas by default or SVG when renderer="svg".
The config is the same contract as every EvilCharts chart — each key maps a data key to a label and a per-theme colors array. See Chart Config for the full shape. Colors resolve from CSS variables at runtime, so dark mode just works.
The ECharts implementation brings two small departures from the LayerChart sibling: multi-color gradient areas and the dotted, lines, and hatched fills use offscreen canvas textures sized to the plot. With renderer="svg", ECharts may embed those texture tiles as raster images inside the SVG. The zoom brush is a themed mini chart driven by ECharts’ native dataZoom instead of the custom EvilBrush.
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.
SVG Renderer
Pass renderer="svg" to the chart root to opt into ECharts’ SVG renderer. Omit it to use the default Canvas renderer.
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
Ordered dither
Set renderStyle="dither" to use the independent ordered-dither treatment inspired by Dither Kit. Axes, tooltips, selection, and the ECharts renderer stay intact.
API Reference
Props are grouped by the part they belong to. Regardless of renderer, each part is declarative config the root compiles, but the API mirrors the LayerChart sibling one-to-one.
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 chart surface. 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 <EChartsAreaChart.Brush /> to render it; dragging the range filters the main chart.