Line Chart

Line Chart

Smooth, linear, and step line charts with optional dots, data labels, dashed strokes, and custom interpolation. Supports right-axis placement and multi-series layouts.

Interactive

A live line chart with time-range filtering and a custom tooltip formatter.

Line Chart — Interactive

Showing trends for the last 3 months

Variants

Core line chart configurations.

API Reference

Prop Type Default Description
Data IEnumerable<TData> required The data collection to render.
Padding Padding 32,16,24,16 Plot-area padding (Top, Right, Bottom, Left).
EnableAnimation bool true Whether to animate on first render.
Class string? null Additional CSS classes on the root element.
DataKey string required Property name for line values (on Line series).
Name string? DataKey Legend and tooltip series name.
Color string? auto Line color. Accepts any CSS color value.
LineWidth int 2 Stroke width in pixels.
Dashed bool false Whether to render the line as a dashed stroke.
ShowDots bool false Show symbols at each data point.
DotSize int 6 Symbol size in pixels when ShowDots is true.
DotShape SymbolShape Circle Symbol shape when ShowDots is true.
Interpolation InterpolationType Natural Curve interpolation: Natural, Monotone, Linear, Step.
ShowLabel bool false Whether to show data labels on each point.
LabelPosition LabelPosition Top Position of the data label relative to the point.

Reconnecting...

Attempting to rejoin the server

Connection Lost

Retrying in seconds

Connection Failed

Failed to rejoin the server.
Please retry or reload the page.

Session Paused

The session has been paused by the server

Resume Failed

Failed to resume the session.
Please reload the page.