Angular ChartsLine Series

A Line Series visualises continuous data, and is typically used to see trends or fluctuations over time.

Simple Line Copy Link

To create a Line Series, use the line series type. If no type is provided, a Line Series will be created by default.

{
    series: [
        { type: 'line', xKey: 'quarter', yKey: 'petrol', yName: 'Petrol' },
        { type: 'line', xKey: 'quarter', yKey: 'diesel', yName: 'Diesel' },
    ],
}

In this configuration:

xKey defines the categories, and is mapped to the Category Axis.
yKey provides the numerical values, corresponding to the Number Axis.
yName configures display names, reflected in Tooltip Titles and Legend Items.

Customisation Copy Link

It is possible to customise the appearance of the line, labels and markers for each series.

Note that the Legend automatically reflects the customisation of the series and markers.

Labels Copy Link

Labels can be displayed above each data point. Use the label option to enable and style the labels.

{
    series: [
        {
            // ...
            label: {
                enabled: true,
                fontWeight: 'bold',
            },
        },
    ],
}

Please see the API Reference for a list of all available label options.

Markers Copy Link

Markers are displayed by default in the Line Series. Use the marker option to style or disable the markers.

{
    series: [
        {
            // ...
            marker: {
                fill: 'orange',
                size: 10,
                stroke: 'black',
                strokeWidth: 3,
                shape: 'diamond',
            },
        },
    ],
}

Please see the Series Markers page for more information or the API Reference for a list of all available marker options.

Interpolation Copy Link

A straight line is used to connect points by default in the Line Series. Use the interpolation option to change the line style.

{
    series: [
        {
            // ...
            interpolation: {
                type: 'smooth',
            },
        },
    ],
}

Please see the API Reference for a list of all available interpolation options.

Data Copy Link

Missing Data Copy Link

Data points with a yKey value of positive or negative Infinity, null, undefined or NaN will be rendered as a gap in the line. Set connectMissingData: true to draw a connecting line between points either side of a missing point.
Data points with invalid xKey values will be ignored.

Continuous Data Copy Link

By default, the Line series uses a Category Axis to plot the xKey values, but this can be changed if you have continuous data, such as trends over time.

Time can be provided as number or Date objects, where number values are interpreted as timestamps derived from Unix time.
See Time Axes for more information about the different time axes available.
All time axes automatically select an appropriate label format depending on the time span of the data, making a best-effort attempt to prevent the labels from overlapping.

See Axes Types for more information on using a Time Axis or a Number Axis.

Getting started

Core features

Specialised Charts

Series

Gauges