Svelte 5 port
| |

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 Svelte 5 line charts

api doc github

Installation
npx shadcn-svelte@latest add https://evilcharts-sv.vercel.app/r/layerchart-line-chart.json

Usage

The line chart is composable. <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.

<script lang="ts">
	import { EvilLineChart } from '$lib/components/evilcharts/charts/layerchart-line-chart';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script>
<EvilLineChart {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}
	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

Buffer Line

Examples

Examples with different variants — change the curveType and strokeVariant.

Gradient Colors

Curve Types

Stroke Variants

Glowing Lines

Dither rendering

Set renderStyle="dither" on the existing chart root for a responsive ordered-dither stroke while the SVG line remains the tooltip, selection, dot, and brush target. A line-level ditherVariant overrides the root texture.

The renderer is independently implemented for EvilCharts SV and inspired by Dither Kit by Boring Software.

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*Snippet–

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

accessibilityChartAccessibility–

Names and optionally describes the chart wrapper. It remains a group, so interactive legends and marks stay available to assistive technology.

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.

animationType none| 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="…" />.

renderStyle svg| dither"svg"Selects the SVG or ordered-dither renderer.
ditherVariant gradient| dotted| hatched| solid"gradient"Default texture for dithered series.
ditherCellSizenumber2Dither cell size in CSS pixels.
bloom off| low| high| aura"off"Optional bounded glow around dither pixels.
chartPropsComponentProps<typeof LineChart>–

Extra props forwarded to the underlying LayerChart Chart. See the LayerChart Chart 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.

strokeVariant solid| 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.

animationType none| 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.

childrenSnippet–

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

linePropsComponentProps<typeof Line>–

Escape hatch for raw props forwarded to the underlying LayerChart 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
variant default| 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 LayerChart 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 LayerChart axis prop is forwarded as-is. See the LayerChart Axis documentation .

Grid

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

PropTypeDefaultDescription
…gridProps––

Every LayerChart grid prop is forwarded as-is. See the LayerChart Grid documentation .

Tooltip

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

PropTypeDefaultDescription
variant default| frosted-glass"default"

The visual style of the tooltip surface.

roundness sm| 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
variant square| circle| circle-outline| rounded-square| rounded-square-outline| vertical-bar| horizontal-bar–

The visual style of the legend indicators.

align left| center| right"right"

Horizontal placement of the legend.

verticalAlign top| 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.

Was this page helpful?