Vue ChartsScatter Series

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:

• xKey defines the numerical values for the x axis, and is mapped by default to a Number.
• yKey provides the numerical values for the y axis, and is mapped by default to a Number Axis.
• xName and yName are optional and configure display names, reflected in Tooltips.
• title is 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.

series: {
    //...
    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 styling 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.

API Reference