Skip to main content

The Scatter Series Type

Scatter Series can be created using the XyScatterRenderableSeries📘 type.

tip

The JavaScript Scatter Chart Example can be found in the SciChart.Js Examples Suite > Scatter Chart on Github, or our live demo at scichart.com/demo.

Above: The JavaScript Scatter Series Chart example from the SciChart.js Demo

Create a Scatter Series​

To create a Javascript Scatter Chart with SciChart.js, use the following code:

    // Demonstrates how to create a scatter chart with SciChart.js
    const {
        SciChartSurface,
        NumericAxis,
        XyDataSeries,
        XyScatterRenderableSeries,
        EllipsePointMarker,
        SciChartJsNavyTheme
    } = SciChart;
    // or, for npm, import { SciChartSurface, ... } from "scichart"

    const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
        theme: new SciChartJsNavyTheme()
    });

    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

    const xValues = [];
    const yValues = [];
    for (let i = 0; i < 100; i++) {
        xValues.push(i);
        yValues.push(0.2 * Math.sin(i * 0.1) - Math.cos(i * 0.01));
    }

    const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, {
            xValues,
            yValues
        }),
        pointMarker: new EllipsePointMarker(wasmContext, {
            width: 7,
            height: 7,
            strokeThickness: 2,
            fill: "steelblue",
            stroke: "LightSteelBlue"
        })
    });
    sciChartSurface.renderableSeries.add(scatterSeries);

This results in the following:

In the code above:

Render a Gap in a Scatter Series​

tip

It is possible to have null points or gaps in a Scatter Series by passing a data point with a NaN value as the Y value. Or, by simply skipping a point if using a value-axis. Please refer to the Common Series Features - Draw Gaps in Series article for more details.

Drawing Last Point only in a Scatter Series​

tip

New to SciChart.js v3.2! The PointMarker type has a property isLastPointOnly📘. When true, only the last point of a scatter series is drawn. This can be useful to highlight a point in say a sweeping ECG chart.

Different Point-Markers on a Scatter Series​

Every data point of a Scatter Series is marked with a PointMarker📘. Several different types of PointMarker are available in SciChart.js.

tip

To learn more about the types of Point Marker in SciChart.js, see the Point Markers API documentation.

There is also a TypeScript example of custom pointmarkers in the SciChart.js Demo.

Finally, there is a dedicated Bubble Series type with some more options such as per-point sizing.

Painting Scatter Points with Different Colors​

tip

It is possible to define the colour of PointMarkers individually using the PaletteProvider API.

For more info on how to do this, see the PaletteProvider - Per-point colouring of Scatter Charts documentation page.

See Also​