Skip to main content

​
Constructor

Creates a new line series instance. 
const lineSeries = new LineSeries();

​
Properties

​
color
string
default:"#4f46e5"
Color of the line and data points. Defaults to Indigo-600.
​
name
string
default:"Series"
Name of the series displayed in the legend.
​
visible
boolean
default:"true"
Whether the series is visible on the chart.
​
data
Point[]
default:"[]"
Array of data points to render. Each point has x and y properties.
​
visibleData
Point[]
default:"[]"
Downsampled data points actually rendered. Uses LTTB algorithm for datasets over 2000 points.
​
xScale
Scale | null
default:"null"
Scale instance for X-axis coordinate transformation.
​
yScale
Scale | null
default:"null"
Scale instance for Y-axis coordinate transformation.
​
animationEnabled
boolean
default:"true"
Whether animations are enabled for this series.
​
animationDuration
number
default:"600"
Duration of animations in milliseconds.

​
Methods

​
setData

Updates the series data and triggers animation if enabled.
​
data
Point[]
required
Array of data points where each point contains x and y values.
lineSeries.setData([
  { x: 0, y: 10 },
  { x: 1, y: 20 },
  { x: 2, y: 15 }
]);

​
setScales

Sets the X and Y scales for coordinate transformation.
​
xScale
Scale
required
Scale instance for X-axis transformation.
​
yScale
Scale
required
Scale instance for Y-axis transformation.
lineSeries.setScales(xScale, yScale);

​
render

Renders the line series on the canvas. Called automatically during the chart render cycle. 
lineSeries.render();

​
enableAnimation

Enables animation for the series with an optional custom duration.
​
duration
number
default:"600"
Animation duration in milliseconds.
lineSeries.enableAnimation(800);

​
disableAnimation

Disables animation for the series. 
lineSeries.disableAnimation();

​
startAnimation

Manually triggers the render animation. 
lineSeries.startAnimation();

​
getDataAt

Returns the data point closest to the given position, used for tooltips.
​
point
Point
required
Position to query, typically mouse coordinates in pixels.
​
return
Point | null
The closest data point within a 10-pixel threshold, or null if none found.
const dataPoint = lineSeries.getDataAt({ x: 100, y: 200 });

​
Data format

Line series accepts an array of Point objects: 
const data: Point[] = [
  { x: 0, y: 10 },
  { x: 1, y: 20 },
  { x: 2, y: 15 },
  { x: 3, y: 25 }
];

​
Configuration

When using the Chart API, configure line series through the series config:
LineSeriesConfig
interface LineSeriesConfig {
  type: "line";
  data: Point[];
  color?: string;
  visible?: boolean;
  name?: string;
}

​
Performance

Line series automatically downsamples datasets with more than 2000 points using the LTTB (Largest-Triangle-Three-Buckets) algorithm to maintain visual fidelity while improving rendering performance. This only applies to numeric X values; categorical data is not downsampled.

​
Animation

By default, line series animates on initial render and data updates. The animation:
  • Uses easeOutCubic easing function
  • Progressively draws points from left to right
  • Duration is 600ms by default
  • Can be customized or disabled
// Customize animation duration
lineSeries.enableAnimation(1000);

// Disable animation
lineSeries.disableAnimation();

Build docs developers (and LLMs) love

Get started for freeTalk to us