This section covers the most common series type — Line series.
Line series can be used in many situations. It's the series of choice when you need to spot a trend, render large amounts of data or create a real-time chart. Line series is also the preferred choice for rendering continuous data with irregular intervals or incomplete data that has some values missing.
'line' series type is so common, the chart factory
AgChart.create method) uses it as the default type, so it doesn't have
to be specified explicitly.
The simplest line series config therefore only requires two properties:
The chart expects the data (
chart.data property) to be an array of objects, where each object
is a table row or a database record and each key is a column. To plot anything on a plane, we need at least
yKey line series
configs tell the series which keys should be used to fetch the values of these coordinates from each object
If we have more than two fields inside each object in the
data array, we can create
a multi-series line chart. For example, if a datum looks like this:
then we can use the same
quarter key as
xKey for both series
diesel keys for
yKey of the first
and second line series, respectively.
To create multiple line series we need to provide two config objects in the
And we get a result like this:
Legend and Tooltip Information
By default the legend shows the keys used to fetch the series data, but those
may not be very presentable. In our case, the
inside the data objects are not capitalised. We can provide a better display name
yName config, and the legend will show that instead.
yName will also show up in tooltip titles:
Line and Marker Colours
The chart above is not complicated, but it could still benefit from more visual separation. Currently both series use the same colours. Let's change that by making diesel look more like diesel. If we just add the following two configs to the second series:
We'll get a result like this:
There are many other customisations you can make to the markers; see the markers section for more information.
In a perfect world all data would be 100% complete. Unfortunately, in the real one, data for certain items or time periods might be missing or corrupted. But that shouldn't result in corrupted charts, and ag-Charts supports the correct rendering of incomplete data:
yKey value of a data point is positive or negative
NaN, that data point will be rendered as a gap.
The same is true for the
xKey, if the bottom axis is also continuous (for example,
if it's a
'number' axis too).
By default, the bottom axis is a
'category' axis, but this can be changed if you have continuous
data that you would like to plot. See the axes section for more
information on configuring axes.
The following example shows how line series can be used to render time-series data, using a
axis. In this case, we have two ambient temperature sensors that give us two independent data sets,
with different numbers of readings taken at different times:
Because we have two separate data sets, we are using the
of each series, rather than the
data property of the chart itself:
Notice that even though one data set has dates as
Date objects and another
uses timestamps, it doesn't present a problem and both series render just fine.
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.
The chart will update whenever new data is supplied via
the chart's or series'
This example uses the
'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.
|The key to use to retrieve x-values from the data.|
|A human-readable description of the x-values.|
|The key to use to retrieve y-values from the data.|
|A human-readable description of the y-values.|
|The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.|
|Whether or not to display the series.|
|Whether or not to include the series in the legend.|
|Whether or not to show tooltips when the series are hovered over.|
|Function used to create the content for tooltips.|
|The title to use for the series. Defaults to |
|The colour of the stroke for the lines.|
|The opacity of the stroke for the lines.|
|The width in pixels of the stroke for the lines.|
|Configuration for the markers used in the series. See marker for more details about this configuration object.|
|Configuration for the highlighting used when the markers are hovered over. See highlightStyle for more details about this configuration object.|
|A map of event names to event listeners. See listeners for more details about this configuration object.|
Configuration for the markers used in the series.
|Whether or not to show markers.|
|The shape to use for the markers. You can also supply a custom marker by providing a |
|The size in pixels of the markers.|
|For series where the size of the marker is determined by the data, this determines the smallest size a marker can be in pixels.|
|The colour to use for marker fills. If this is not specified, the markers will take their fill from the series.|
|The colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series.|
|The width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series.|
|Function used to return formatting for individual markers, based on the supplied information. If the current marker is highlighted, the |
Configuration for the highlighting used when the markers are hovered over.
|The fill colour of the markers when hovered over.|
|The colour of the stroke around the markers when hovered over.|
A map of event names to event listeners.
|The listener to call when a line series node (marker) is clicked.|
Continue to the next section to learn about bar and column series.