||

Line Chart

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Beautifully designed static line charts

apidocgithub
Basic Chart

Installation
npx shadcn@latest add @evilcharts/recharts-line-chart

Usage

The line chart is composible. <EvilLineChart> is the container, and every part hangs off it as a compound member — <EvilLineChart.Grid>, <EvilLineChart.XAxis>, <EvilLineChart.YAxis>, <EvilLineChart.Legend>, <EvilLineChart.Tooltip>, and one or more <EvilLineChart.Line> — as children. Each <Line> sets its own strokeVariant, curveType, glowing, enableBufferLine, and isClickable, so one chart can mix stroke styles and make only some series interactive.

import { EvilLineChart } from "@/components/evilcharts/charts/recharts-line-chart";
import { type ChartConfig } from "@/components/evilcharts/ui/recharts-chart";
<EvilLineChart data={data} config={chartConfig} curveType="monotone">
  <EvilLineChart.Grid />
  <EvilLineChart.XAxis dataKey="month" />
  <EvilLineChart.YAxis />
  <EvilLineChart.Legend isClickable />
  <EvilLineChart.Tooltip />
  <EvilLineChart.Line dataKey="desktop" strokeVariant="solid" isClickable>
    <EvilLineChart.Dot variant="border" />
    <EvilLineChart.ActiveDot variant="colored-border" />
  </EvilLineChart.Line>
  <EvilLineChart.Line dataKey="mobile" strokeVariant="dashed" glowing>
    <EvilLineChart.ActiveDot variant="default" />
  </EvilLineChart.Line>
</EvilLineChart>

Interactive Selection

Add isClickable to any <Line> (or <Legend>) to make its series selectable, then handle events with the onSelectionChange callback on <EvilLineChart>:

<EvilLineChart
  data={data}
  config={chartConfig}
  onSelectionChange={(selectedDataKey) => {
    if (selectedDataKey) {
      console.log("Selected:", selectedDataKey);
    } else {
      console.log("Deselected");
    }
  }}
>
  <EvilLineChart.XAxis dataKey="month" />
  <EvilLineChart.Legend isClickable />
  <EvilLineChart.Tooltip />
  <EvilLineChart.Line dataKey="desktop" strokeVariant="solid" isClickable />
  <EvilLineChart.Line dataKey="mobile" strokeVariant="solid" isClickable />
</EvilLineChart>

Loading State

isLoading='true'

Buffer Line

enableBufferLine='true'

Examples

Examples with different variants — change the curveType and strokeVariant.

Gradient Colors

gradient colors
gradient colors - bump

Curve Types

curveType='bump'
curveType='step'
curveType='monotoneY'

Stroke Variants

strokeVariant='solid'
strokeVariant='dashed'
strokeVariant='animated-dashed'

Glowing Lines

glowing - gradient colors
glowing - solid colors

API Reference

Props below are grouped by the component they belong to.

EvilLineChart

The root container. It owns the data, selection state, loading skeleton, and optional brush; everything visual is composed as children.

PropTypeDefaultDescription
data*TData[]–

The chart data — an array of objects, each a data point (TData extends Record<string, unknown>).

config*Record<string, ChartConfig[string]>–

Defines the chart's series. Each key matches a data key, with a color or color array.

children*ReactNode–

The composed chart parts — <Grid />, <XAxis />, <YAxis />, <Legend />, <Tooltip />, and one or more <Line />.

classNamestring–

Extra CSS classes for the chart container.

curveType"basis" | "bumpX" | "bumpY" | "bump" | "linear" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "step" | …"linear"

The default curve interpolation for every <Line />; each can override it locally.

animationTypenone|left-to-right|right-to-left|center-out|edges-in"left-to-right"

Direction of the intro reveal for every <Line />. "none" disables it; the OS reduce-motion preference falls back to "none" automatically.

defaultSelectedDataKeystring | nullnull

The data key selected by default.

onSelectionChange(selectedDataKey: string | null) => void–

Fires when a series is selected or deselected via a clickable <Line /> or <Legend />. Receives the data key, or null when deselected.

isLoadingbooleanfalse

Shows a shimmer loading skeleton while data is being fetched.

loadingPointsnumber14

Data points shown in the loading skeleton.

xDataKeykeyof TData & string–

The x-axis data key. Only the brush footer needs it — the axis reads its key from <XAxis dataKey="…" />.

chartPropsComponentProps<typeof LineChart>–

Extra props forwarded to the underlying Recharts LineChart. See the Recharts LineChart documentation.

Line

A single line series. Each <Line /> generates its own gradient and glow definitions, so a chart can hold any number — each with its own stroke, glow, and clickability.

PropTypeDefaultDescription
dataKey*string–

The series key. Must exist on both the data rows and the chart config.

strokeVariantsolid|dashed|animated-dashed"solid"

This line's stroke style.

strokeWidthnumber0.8

Stroke thickness for this line, in pixels.

curveType"basis" | "bump" | "linear" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "step" | "stepBefore" | "stepAfter" | …–

The curve interpolation for this line. Falls back to the chart's curveType when omitted.

animationTypenone|left-to-right|right-to-left|center-out|edges-in–

The intro reveal animation for this line. Falls back to the chart's animationType when omitted.

connectNullsbooleanfalse

Whether to connect line segments across null or missing values.

isClickablebooleanfalse

Lets this line be selected by clicking it. When any line is selected, unselected lines become semi-transparent.

glowingbooleanfalse

Applies a soft outer glow to this line.

enableBufferLinebooleanfalse

Renders this line's last segment as a dashed buffer while the rest stays solid. Useful for indicating projected or incomplete data at the end of a series.

childrenReactNode–

Optional <Dot /> and <ActiveDot /> markers for this line.

linePropsComponentProps<typeof Line>–

Escape hatch for raw props forwarded to the underlying Recharts Line component.

Dot and ActiveDot

Point markers composed inside a <Line />. <Dot /> is the resting marker, <ActiveDot /> the hovered one. They render nothing themselves — the parent <Line /> reads their variant.

PropTypeDefaultDescription
variantdefault|border|colored-border–

The visual style of the point marker.

XAxis and YAxis

The category and value axes. Both use the chart's flat default styling and forward every Recharts axis prop, so dataKey, tickFormatter, tickMargin, etc. pass through. They hide automatically while the chart loads.

PropTypeDefaultDescription
dataKeystring–

The data key for the axis values.

…axisProps––

Every other Recharts XAxis / YAxis prop is forwarded as-is. See the Recharts XAxis and Recharts YAxis docs.

Grid

The background grid lines. Defaults to horizontal-only dashed lines and forwards every Recharts CartesianGrid prop.

PropTypeDefaultDescription
…gridProps––

Every Recharts CartesianGrid prop is forwarded as-is. See the Recharts CartesianGrid documentation.

Tooltip

The hover tooltip. It reads the chart's selection state so its content dims unselected series.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

The visual style of the tooltip surface.

roundnesssm|md|lg|xl"lg"

Controls the border-radius of the tooltip.

defaultIndexnumber–

Shows the tooltip by default at this data-point index.

cursorbooleantrue

Whether the vertical cursor line follows the pointer on hover.

Legend

The series legend. When the chart is clickable, each entry toggles selection of its series.

PropTypeDefaultDescription
variantsquare|circle|circle-outline|rounded-square|rounded-square-outline|vertical-bar|horizontal-bar–

The visual style of the legend indicators.

alignleft|center|right"right"

Horizontal placement of the legend.

verticalAligntop|middle|bottom"top"

Vertical placement of the legend.

isClickablebooleanfalse

Lets each legend entry toggle selection of its series.

Brush

An optional zoom brush below the chart. Include <EvilLineChart.Brush /> to render it; dragging the range filters the main chart.

PropTypeDefaultDescription
heightnumber–

Height of the brush preview strip in pixels.

formatLabel(value: unknown, index: number) => string–

Formats the range-handle labels below the brush.

onChange(range: { startIndex: number; endIndex: number }) => void–

Fires when the brush selection range changes.

Did you like the content?