Angular ChartsLine Series

ReactAngularVueJavascript

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

Simple Line

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

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

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

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.

Data

Missing Data

• 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

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.
• The time axis automatically selects 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.

Real-Time Data

The chart will update whenever new data is supplied via the chart's or series' data property.

This example uses a Time Axis which is configured to show a tick every 5 seconds and to use the %H:%M:%S label format to show colon separated hours, minutes and seconds.

API Reference