Skip to main content
Version: 6.1.2

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.addPointLineAreaSeries({ dataPattern: null })
    .setStrokeStyle(emptyLine)
    .setAreaFillStyle(emptyFill)

Chart with scatter series Chart with scatter series

Adding data​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line](/6.1.2/features/xy/line)

Point color​

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

For more details about style API, please see Styles, colors and fonts](/6.1.2/more-guides/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)

Individual colors​

const scatterSeries = chart.addPointLineAreaSeries({
    dataPattern: null,
    colors: true
})
    .setAreaFillStyle(emptyFill)
    .setStrokeStyle(emptyLine)
    .setPointFillStyle(new IndividualPointFill())
    .appendSamples({
        xValues: [4, 2, 6],
        yValues: [5, 2, 8],
        colors: [0xff0000ff, 0xff00ff00, 0xff00ff00], // red, green, green
    })

Individual color scatter series Individual color scatter series

Colors can also be supplied as Color objects created using one of the many Color factories (ColorRGBA, ColorHEX, etc.). However, for performance reasons you should avoid creating a large number of individual Color objects.

const colorRed = new SolidFill({ color: ColorRGBA(255, 0, 0) })
const colorGreen = new SolidFill({ color: ColorRGBA(0, 255, 0) })
scatterSeries
    .appendSamples({
        xValues: [4, 2, 6],
        yValues: [5, 2, 8],
        // This is fine (reuse same color objects)
        colors: [colorRed, colorGreen, colorGreen],
    })

Individual rotations​

const scatterSeries = chart.addPointLineAreaSeries({
    dataPattern: null,
    rotations: true
})
    .setAreaFillStyle(emptyFill)
    .setStrokeStyle(emptyLine)
    .appendSamples({
        xValues: [4, 2, 6],
        yValues: [5, 2, 8],
        rotations: [0, 45, 135]
    })

Color by lookup table​

Alternative approach to individual colors, you can give each data point a number value, and specify rules for getting a color from any number:

const scatterSeries = chart.addPointLineAreaSeries({
    dataPattern: null,
    lookupValues: true
})
    .setAreaFillStyle(emptyFill)
    .setStrokeStyle(emptyLine)
    .setPointFillStyle(new PalettedFill({
        lookUpProperty: 'value',
        lut: new LUT({
            interpolate: true,
            steps: [
                { value: 0, color: ColorCSS('red') },
                { value: 100, color: ColorCSS('green') },
            ]
        })
    }))
    .appendSamples({
        xValues: [4, 2, 6],
        yValues: [5, 2, 8],
        lookupValues: [0, 100, 50]
    })
const legend = chart.addLegendBox().add(chart)

Lookup color scatter series Lookup color scatter series

LUT has also a percentageValues option, which you can use if you want to use % values of the present min-max lookup value range, rather than specific value steps:

new LUT({
    percentageValues: true,
    interpolate: true,
    steps: [
        // 0 = 0 %, 1 = 100%
        { value: 0, color: ColorCSS('red') },
        { value: 1, color: ColorCSS('green') },
    ]
})

Color by X or Y​

Instead of using lookup values in data set, you can also use X or Y coordinates directly, by changing the lookUpProperty value in PalettedFill.

new PalettedFill({
    lookUpProperty: 'x', // 'x' or 'y'
    lut: new LUT({
        interpolate: true,
        steps: [
            { value: 0, color: ColorCSS('red') },
            { value: 100, color: ColorCSS('green') },
        ]
    })
})

Color by gradient​

More alternatives to dynamic coloring - you can also define a gradient (linear or radial), to color the points.

const scatterSeries = chart.addPointLineAreaSeries({ dataPattern: null })
    .setAreaFillStyle(emptyFill)
    .setStrokeStyle(emptyLine)
    .setPointFillStyle(new LinearGradientFill({
        // down -> up
        angle: 0,
        stops: [
            { offset: 0, color: ColorCSS('red') },
            { offset: 1, color: ColorCSS('green') },
        ],
    }))

Gradient color scatter series Gradient color scatter series

Using timestamps​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line](/6.1.2/features/xy/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](/6.1.2/features/xy/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](/6.1.2/features/xy/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](/6.1.2/features/xy/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](/6.1.2/features/xy/line)

Edit samples data​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line](/6.1.2/features/xy/line)