Skip to main content
Version: 8.3.1

Scatter

A commonly needed visualization feature is to display a set of X+Y points scattered around.

// Creation of a scatter series
const scatterSeries = chart.addPointSeries()

Chart with scatter seriesChart with scatter series

Point color​

scatterSeries.setPointFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

For more details about style API, please see Styles, colors and fonts.

Point border​

scatterSeries.setPointStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }) }))

For more details about style API, please see Styles, colors and fonts.

Point shape​

There are a handful of shape options to choose from, like Star, Circle, Square, Arrow, etc.

scatterSeries.setPointShape(PointShape.Star)

Point size​

// 5 pixels point size
scatterSeries.setPointSize(5)

Point rotation​

// Rotate points by 45 degrees
scatterSeries.setPointRotation(45)

Point stroke​

A stroke can be drawn along the edges of points with setPointStrokeStyle method:

// Example, 2px thick black stroke
series.setPointStrokeStyle(new SolidLine({
    thickness: 1, 
    fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 0) }) 
}))

Point stroke​

A stroke can be drawn along the edges of points with setPointStrokeStyle method:

// Example, 2px thick black stroke
series.setPointStrokeStyle(new SolidLine({
    thickness: 1, 
    fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 0) }) 
}))

Adding data​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Schema and data mapping​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Individual colors​

This section works the same as for Line, with only exception being that IndividualPointFill should be set as points fill style rather than line fill style.

const scatterSeries = chart.addPointSeries()
    .setPointFillStyle(new IndividualPointFill())

Individual color scatter seriesIndividual color scatter series

to avoid duplication of guides, please refer to the section under Line

Individual rotations​

const scatterSeries = chart.addPointSeries()
    .appendSamples({
        xValues: [4, 2, 6],
        yValues: [5, 2, 8],
        rotations: [0, 45, 135]
    })
    .setDataMapping({ x: 'xValues', y: 'yValues', rotation: 'rotations' })

Individual point sizes​

See Bubble chart

Color by lookup table​

This section works the same as for Line, with only exception being that PalettedFill should be set as points fill style rather than line fill style.

const scatterSeries = chart.addPointSeries()
    .setPointFillStyle(new PalettedFill({
        lookUpProperty: 'value',
        lut: new LUT({
            interpolate: true,
            steps: [
                { value: 0, color: ColorCSS('red') },
                { value: 100, color: ColorCSS('green') },
            ]
        })
    }))

Lookup color scatter seriesLookup color scatter series

to avoid duplication of guides, please refer to the section under Line

Color by X or Y​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Color by gradient​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Using timestamps​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Data cleaning / maximum memory use​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Connecting to non-default axis​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Solve nearest from location​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Interactions with data points​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Edit samples data​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Read back data​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Data storage optimization​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Separating data sets from series​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Scaling, offsetting and transforming coordinates​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line