Line series

A line series connects data points to show how a value changes along the X axis. It is commonly used for time series, trends, and comparisons between several metrics.

Set series.data[].type to line and provide the point coordinates through x and y:

series: {
  data: [
    {
      type: 'line',
      name: 'Revenue',
      data: [
        {x: 0, y: 42},
        {x: 1, y: 58},
        {x: 2, y: 51},
      ],
    },
  ],
}

See the complete configuration in the LineSeries API reference.

MarkersMarkers

Set marker.enabled: true to keep point markers visible. Configure their radius and border on hover through series.options.line.states.hover.marker:

series: {
  options: {
    line: {
      marker: {enabled: true, radius: 3},
      states: {
        hover: {
          marker: {radius: 8, borderColor: '#ffffff', borderWidth: 2},
        },
      },
    },
  },
}

Hover styles apply to both always-visible and hover-only markers. The normal appearance returns when hover moves to another point or leaves the chart. Set states.hover.enabled: false to keep always-visible markers unchanged while retaining hover-only markers. Set states.hover.marker.enabled: false to disable both marker hover styles and hover-only markers. Area and area-range series support the same options under their respective series keys.

Line interpolationLine interpolation

By default, line series connect data points with straight segments. The interpolation option enables smooth curve rendering while keeping markers, tooltips, and interactions attached to the original data points.

MonotoneMonotone

monotone uses a cubic spline that is monotone in x. The curve passes through every data point without introducing artificial extrema between adjacent points — a good default choice for most smooth line charts.

{
    type: 'line',
    interpolation: {type: 'monotone'},
}

CardinalCardinal

cardinal produces a cardinal spline. The tension parameter (0–1, default 0) controls how tightly the curve follows the control points: 0 gives a loose curve, 1 collapses it to straight segments.

{
    type: 'line',
    interpolation: {type: 'cardinal', tension: 0.5},
}

NotesNotes

• Curves pass through every original data point.
• monotone requires data points to be ordered monotonically by their x values.
• With cardinal and tension < 1, the curve can overshoot the data extrema between points. Such portions may be clipped at the plot boundary. Use monotone when preserving extrema is important.
• nullMode behavior is preserved: gaps and zero-fills are applied before interpolation.
• To disable interpolation explicitly, set interpolation: {type: 'linear'} or omit the option entirely.

ColorColor

The color property accepts a solid color or a gradient. Gradient bounds include the points that participate in the line. The discrete legend uses the line color.

Data label placementData label placement

By default, a label is drawn above its point and shifted into the plot area when it does not fit. Line series can try several positions instead and decide what to do when none of them fits.

Automatic placementAutomatic placement

placement: 'auto' tries the positions top, bottom, left and right in order and takes the first one where the label box does not cross a line of any line series and does not overlap already placed labels. When labels of several series compete for the same spot, the series listed first in series.data wins.

{
  type: 'line',
  dataLabels: {enabled: true, placement: 'auto'},
}

Custom order and fixed positionCustom order and fixed position

An array sets the exact positions to try. A single position pins the label there:

{
  type: 'line',
  dataLabels: {enabled: true, placement: ['bottom']},
}

FallbackFallback

placementFallback decides what happens when none of the positions fits: show (default) draws the label at the first position anyway, hide hides it.

{
  type: 'line',
  dataLabels: {enabled: true, placement: ['bottom'], placementFallback: 'hide'},
}

Notes:

• allowOverlap: true lets the label be placed over other labels; lines are still avoided.
• Both SVG and HTML labels (html: true) support placement.
• With line interpolation the collision check follows the rendered curve.

See LineSeriesDataLabels for the complete data label configuration.