SciChart.js JavaScript 2D Charts API > 2D Chart Types > The Scatter Series Type
The Scatter Series Type

Scatter Series can be created using the XyScatterRenderableSeries type.

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

Fast, Realtime JavaScript Scatter Charts by SciChart.js

Create a Scatter Series

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

JavaScript Line Chart
Copy Code
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));
const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
    pointMarker: new EllipsePointMarker(wasmContext, {
        width: 7,
        height: 7,
        strokeThickness: 1,
        fill: "steelblue",
        stroke: "LightSteelBlue",
    }),
});
sciChartSurface.renderableSeries.add(scatterSeries);
const dataSeries = new XyDataSeries(wasmContext);
for (let i = 0; i < 100; i++) {
    dataSeries.append(i, Math.sin(i * 0.1));
}
scatterSeries.dataSeries = dataSeries;

In the code above:

Render a Gap in a Scatter Series

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. Please refer to the Common RenderableSeries Features article for more details.

Changing the above code as follows:

JavaScript Discontinuous Line Chart
Copy Code
const dataSeries = new XyDataSeries(wasmContext);
for (let i = 0; i < 100; i++) {
    dataSeries.append(i, i % 5 === 0 ? NaN : Math.sin(i * 0.1));
}
scatterSeries.dataSeries = dataSeries;

Results in this:

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:

The following code is taken from the Use Pointmarkers example in the SciChart.js Examples Suite. Notice the different types of point marker, but in particular, notice how we use the SpritePointMarker.

By importing an image and the helper function createImageAsync we create a custom point-marker to render a PNG at every data-point in the scatter series.

Adding PointMarkers to a Line Chart
Copy Code
import { SciChartSurface } from "scichart";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { NumberRange } from "scichart/Core/NumberRange";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { EllipsePointMarker } from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import { SquarePointMarker } from "scichart/Charting/Visuals/PointMarkers/SquarePointMarker";
import { TrianglePointMarker } from "scichart/Charting/Visuals/PointMarkers/TrianglePointMarker";
import { CrossPointMarker } from "scichart/Charting/Visuals/PointMarkers/CrossPointMarker";
import { createImageAsync } from "scichart/utils/imageUtil";
import customPointImage from "./img/CustomMarkerImage.png";
import { SpritePointMarker } from "scichart/Charting/Visuals/PointMarkers/SpritePointMarker";

const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
const dataSeriesArr = createData(wasmContext);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));
// Add a line series with EllipsePointMarker
sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
        stroke: "LightSteelBlue",
        pointMarker: new EllipsePointMarker(wasmContext, {
            width: 9,
            height: 9,
            strokeThickness: 2,
            fill: "#0077FF99",
            stroke: "LightSteelBlue",
        }),
        dataSeries: createData()
    })
);
// Add a scatter series with SquarePointMarker
sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
        stroke: "Red",
        pointMarker: new SquarePointMarker(wasmContext, {
            width: 9,
            height: 9,
            strokeThickness: 2,
            fill: "#FF000099",
            stroke: "Red",
        }),
        dataSeries: createData() // XyDataSeries creation omitted for brevity
    })
);
// Add a scatter series with TrianglePointMarker
sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
        stroke: "#FF6600",
        pointMarker: new TrianglePointMarker(wasmContext, {
            width: 9,
            height: 9,
            strokeThickness: 2,
            fill: "#FFDD00",
            stroke: "#FF6600",
        }),
        dataSeries: createData() // XyDataSeries creation omitted for brevity
    })
);
// Add a scatter series with CrossPointMarker
sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
        stroke: "#FF00FF",
        pointMarker: new CrossPointMarker(wasmContext, {
            width: 9,
            height: 9,
            strokeThickness: 2,
            stroke: "#FF00FF",
        }),
        dataSeries: createData() // XyDataSeries creation omitted for brevity
    })
);
// Add a scatter series with Custom Image using SpritePointMarker
const imageBitmap = await createImageAsync(customPointImage);
sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
        stroke: "#F5DEB3",
        pointMarker: new SpritePointMarker(wasmContext, {
            image: imageBitmap,
        }),
        dataSeries: createData() // XyDataSeries creation omitted for brevity
    })
);

This results in the following output.

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

There is also adedicated Scatter Series type and a Bubble Series type with some more options.

Painting Scatter Points with Different Colors

Scatter series can be colored per-point using the PaletteProvider API. To use this, we must create a class (typescript) or object (javascript) which implements or confirms to the IPointMarkerPaletteProvider interface. Then, apply this to the XyScatterRenderableSeries.paletteProvider property. This allows you to colour data-points based on values, or custom rules with infinite extensiblity.

Paletted Line example
Copy Code
// Create a Scatter Series with EllipsePointMarker
// Multiple point-marker types are available including Square, Triangle, Cross and Sprite (custom)
const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
    pointMarker: new EllipsePointMarker(wasmContext, {
        width: 7,
        height: 7,
        strokeThickness: 1,
        fill: "steelblue",
        stroke: "LightSteelBlue",
    }),
    // Optional: PaletteProvider feature allows coloring per-point based on a rule
    paletteProvider: new ScatterPaletteProvider()
});
sciChartSurface.renderableSeries.add(scatterSeries);

/**
 * Optional: Implement a IPointMarkerPaletteProvider which colors every tenth scatter point
 * to demonstrate the PaletteProvider feature
 */
class ScatterPaletteProvider implements IPointMarkerPaletteProvider {
    readonly strokePaletteMode: EStrokePaletteMode;
    private overrideStroke: number = parseColorToUIntArgb("Red");
    private overrideFill: number = parseColorToUIntArgb("DarkRed");
    onAttached(parentSeries: IRenderableSeries): void {
    }
    onDetached(): void {
    }
    overridePointMarkerArgb(xValue: number, yValue: number, index: number): TPointMarkerArgb {
        // Colour points outside the range +0.5, -0.5 red
        if (yValue >= 0.5 || yValue <= -0.5) {
            return {
                stroke: this.overrideStroke,
                fill: this.overrideFill
            }
        }
        // Undefined means use default colors
        return undefined;
    }
}

The code above results in a JavaScript Scatter Chart with the following output. Y-values which are outside the range +0.5, -0.5 are colored red, while all other values are left default.

 

See Also

Renderable Series APIs