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 negativeInfinity
,null
,undefined
orNaN
will be rendered as a gap in the line. SetconnectMissingData: 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
orDate
objects, wherenumber
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
Properties available on the AgLineSeriesOptions
interface.
Primary identifier for the series. This is provided as seriesId
in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique id
value.
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
Configuration for marker and series highlighting when a series or legend item is hovered over.
A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together.