Line Chart
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Simple static & beautifully designed line charts
Installation
Usage
The line chart is composible. <EvilLineChart> is the container, and you compose only the parts you need — <Grid>, <XAxis>, <YAxis>, <Legend>, <Tooltip>, and one or more <Line> — as its children. Each <Line> carries its own strokeVariant, curveType, glowing, enableBufferLine, and isClickable, so a single chart can mix stroke styles and make only some series interactive.
import {
EvilLineChart,
Line,
XAxis,
YAxis,
Grid,
Tooltip,
Legend,
Dot,
ActiveDot,
} from "@/components/evilcharts/charts/line-chart";<EvilLineChart data={data} config={chartConfig} curveType="monotone">
<Grid />
<XAxis dataKey="month" />
<YAxis />
<Legend isClickable />
<Tooltip />
<Line dataKey="desktop" strokeVariant="solid" isClickable>
<Dot variant="border" />
<ActiveDot variant="colored-border" />
</Line>
<Line dataKey="mobile" strokeVariant="dashed" glowing>
<ActiveDot variant="default" />
</Line>
</EvilLineChart>Interactive Selection
Add isClickable to any <Line> (and to <Legend>) to make those series selectable. Use the onSelectionChange callback on <EvilLineChart> to handle selection events:
<EvilLineChart
data={data}
config={chartConfig}
onSelectionChange={(selectedDataKey) => {
if (selectedDataKey) {
console.log("Selected:", selectedDataKey);
} else {
console.log("Deselected");
}
}}
>
<XAxis dataKey="month" />
<Legend isClickable />
<Tooltip />
<Line dataKey="desktop" strokeVariant="solid" isClickable />
<Line dataKey="mobile" strokeVariant="solid" isClickable />
</EvilLineChart>Loading State
The line chart supports loading state. You can pass the isLoading prop to the chart to show the loading state. You can also pass curveType to customize the curve type of the loading state. Here, im using curveType='bump' to make the loading state more realistic.
Buffer Line
When enableBufferLine is enabled, the last segment of each line is rendered as a dashed/dotted pattern while the rest of the line stays solid. This is useful for indicating projected, estimated, or incomplete data at the end of a series — commonly seen in financial charts and forecasting dashboards.
Examples
Below are some examples of the line chart with different variants. where you can change the curveType & strokeVariant.
Gradient Colors
Curve Types
Stroke Variants
Glowing Lines
API Reference
The chart is composed of several parts. The props below are grouped by the component they belong to.
The root container. It owns the data, the shared selection state, the loading skeleton, and the optional brush. Everything visual is composed as its children.
A single line series. Each <Line /> is self-contained and generates its own gradient and glow definitions, so a chart can hold any number of lines — each with its own stroke, glow, and clickability.
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. Both ship with the chart's flat default styling and forward every Recharts axis prop, so dataKey, tickFormatter, tickMargin, etc. pass straight through. They are hidden automatically while the chart is loading.
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 the chart is clickable, each entry toggles selection of its series.