Line 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 line charts powered by Apache ECharts
Installation
Usage
The ECharts line chart is composable, sharing the Recharts twin's API shape. <EChartsLineChart> is the container, and every part hangs off it as a compound member — <EChartsLineChart.Grid>, <EChartsLineChart.XAxis>, <EChartsLineChart.YAxis>, <EChartsLineChart.Legend>, <EChartsLineChart.Tooltip>, and one or more <EChartsLineChart.Line> — so a single import gives you the whole chart. Each <Line> carries its own strokeVariant, curveType, glowing, enableBufferLine, and isClickable, so one chart can mix stroke styles and make only some series interactive.
import { EChartsLineChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-line-chart";<EChartsLineChart data={data} config={chartConfig} curveType="monotone">
<EChartsLineChart.Grid />
<EChartsLineChart.XAxis dataKey="month" />
<EChartsLineChart.YAxis />
<EChartsLineChart.Legend isClickable />
<EChartsLineChart.Tooltip />
<EChartsLineChart.Line dataKey="desktop" strokeVariant="solid" isClickable>
<EChartsLineChart.Dot variant="border" />
<EChartsLineChart.ActiveDot variant="colored-border" />
</EChartsLineChart.Line>
<EChartsLineChart.Line dataKey="mobile" strokeVariant="dashed" glowing>
<EChartsLineChart.ActiveDot variant="default" />
</EChartsLineChart.Line>
</EChartsLineChart>The one real difference from the Recharts twin is under the hood: ECharts renders to a <canvas>, so these children never mount as DOM. The root reads their props and compiles them into the ECharts option object. Same JSX, same presence semantics (omit a part and it doesn't render), same behavior — the children are declarative config, not live DOM nodes.
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 your CSS variables at runtime, so dark mode just works.
Canvas rendering brings a few small departures from the Recharts twin: multi-color gradients tint each dot with the color at its x-position; the glow is layered gradient strokes stacked under the line, following the series' color in place of an SVG blur filter; and the zoom brush is a themed mini chart driven by ECharts' native dataZoom rather than the custom EvilBrush.
Interactive Selection
Add isClickable to any <Line> (and to <Legend>) to make those series selectable, then handle events via the onSelectionChange callback on <EChartsLineChart>:
<EChartsLineChart
data={data}
config={chartConfig}
onSelectionChange={(selectedDataKey) => {
if (selectedDataKey) {
console.log("Selected:", selectedDataKey);
} else {
console.log("Deselected");
}
}}
>
<EChartsLineChart.XAxis dataKey="month" />
<EChartsLineChart.Legend isClickable />
<EChartsLineChart.Tooltip />
<EChartsLineChart.Line dataKey="desktop" strokeVariant="solid" isClickable />
<EChartsLineChart.Line dataKey="mobile" strokeVariant="solid" isClickable />
</EChartsLineChart>Loading State
Pass isLoading to show an animated skeleton, loadingPoints to set how many points it draws, and curveType to match the real chart's curve.
Buffer Line
With enableBufferLine, each line's last segment renders dashed 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 line 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.
Examples
Examples with different settings. Change strokeVariant on a <Line> or curveType on the chart to restyle it.
Gradient Colors
Curve Types
Stroke Variants
Glowing Lines
API Reference
The chart is composed of several parts; the props below are grouped by part. On canvas each part is declarative config the root compiles, but the API mirrors the Recharts twin 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 line series. Each <Line /> is self-contained — its own stroke, glow, and clickability — so a chart can hold any number of independently styled lines.
Point markers composed inside a <Line />. <Dot /> is the resting marker; <ActiveDot /> is the hovered marker. They render nothing on their own — the parent <Line /> reads their variant.
The category and value axes. Include <XAxis /> for x-axis labels and <YAxis /> for the y-axis; omit either to hide it. Both hide automatically while the chart loads.
The background grid lines. Include it to render the dashed horizontal split lines; omit it and they don't draw. Takes no props.
The hover tooltip. Include it to enable the tooltip; omit it and none shows. It reads the chart's 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. With isClickable, each entry toggles selection of its series.
An optional zoom brush below the chart — a themed mini chart driven by ECharts' native dataZoom. Include <EChartsLineChart.Brush /> to render it; dragging the range filters the main chart.