A Scatter Series identifies the correlation between values across two categories, and can highlight outliers and gaps in the data.
Simple Scatter
To create a Scatter Series use the 'scatter' series type.
series: [
{
type: 'scatter',
title: 'Male',
xKey: 'height',
xName: 'Height',
yKey: 'weight',
yName: 'Weight',
},
],
In this configuration:
xKeydefines the numerical values for the x axis, and is mapped by default to a Number.yKeyprovides the numerical values for the y axis, and is mapped by default to a Number Axis.xNameandyNameare optional and configure display names, reflected in Tooltips.titleis optional and is used in the Tooltip Titles and Legend Items.
Markers
It is possible to customise the fill, stroke and shape of the markers used in the Scatter Series.
marker: {
shape: 'square',
fill: '#e36f6ab5',
stroke: '#9f4e4a',
},
In the above example, the 'females' series uses 'circle' markers and the 'male' series uses 'square' markers.
Please see the Series Markers page for more information or the API Reference for a list of all available marker options.
Labels
To show labels for a Scatter Series set the label.enabled config of a series to true and specify which key should be used to fetch the label values.
Scatter Series label placement is constrained so that:
- labels don't overlap any markers
- labels don't overlap other labels
If these constraints are not satisfied, a label is not placed.
Try opening the above example in a larger window to see that more labels are placed as the chart gets bigger. You can also try changing the size of the markers and the font size of the labels to see how that affects label placement.
Satisfying these constraints is computationally intensive and the complexity rises exponentially with increasing number of data points. Given that label placement might have to happen in real time, for example, when resizing a chart window, it is advised not to enable Scatter Series labels for data sets with more than a few hundred points.
API Reference
Properties available on the AgScatterSeriesOptions 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.
A human-readable description of the label values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.