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)

Adding data

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

Point color

scatterSeries.setPointFillStyle(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)

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
    })

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)

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') },
        ],
    }))

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

Edit samples data

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