The Bubble Series Type

Bubble Series can be created using the FastBubbleRenderableSeries type.

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

Fast, Realtime JavaScript Bubble Charts by SciChart.js

Create a Bubble Series

To create a Javascript Bubble 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) })); // Line Series const lineSeries = new FastLineRenderableSeries(wasmContext, { stroke: "#FFFFFF", strokeThickness: 2 }); sciChartSurface.renderableSeries.add(lineSeries); // Bubble Series const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, { pointMarker: new EllipsePointMarker(wasmContext, { width: 64, height: 64, strokeThickness: 0, fill: "#4682b477" }), }); sciChartSurface.renderableSeries.add(bubbleSeries); // Populate data to both series const lineDataSeries = new XyDataSeries(wasmContext); const bubbleDataSeries = new XyzDataSeries(wasmContext); const POINTS = 20; let prevYValue = 0; for (let i = 0; i < POINTS; i++) { const curYValue = Math.sin(i) * 10 - 5; const size = Math.sin(i) * 60 + 3; lineDataSeries.append(i, prevYValue + curYValue); bubbleDataSeries.append(i, prevYValue + curYValue, size); prevYValue += curYValue; } lineSeries.dataSeries = lineDataSeries; bubbleSeries.dataSeries = bubbleDataSeries;

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) }));
// Line Series
const lineSeries = new FastLineRenderableSeries(wasmContext, {
    stroke: "#FFFFFF",
    strokeThickness: 2 });
sciChartSurface.renderableSeries.add(lineSeries);
// Bubble Series
const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {
    pointMarker: new EllipsePointMarker(wasmContext, {
        width: 64,
        height: 64,
        strokeThickness: 0,
        fill: "#4682b477"
    }),
});
sciChartSurface.renderableSeries.add(bubbleSeries);
// Populate data to both series
const lineDataSeries = new XyDataSeries(wasmContext);
const bubbleDataSeries = new XyzDataSeries(wasmContext);
const POINTS = 20;
let prevYValue = 0;
for (let i = 0; i < POINTS; i++) {
    const curYValue = Math.sin(i) * 10 - 5;
    const size = Math.sin(i) * 60 + 3;
    lineDataSeries.append(i, prevYValue + curYValue);
    bubbleDataSeries.append(i, prevYValue + curYValue, size);
    prevYValue += curYValue;
}
lineSeries.dataSeries = lineDataSeries;
bubbleSeries.dataSeries = bubbleDataSeries;

In the code above:

A Bubble Series instance is created and added to the SciChartSurface.renderableSeries collection.
We set a PointMarker with a width, height = 64. Note that this pointmarker will be scaled up or down relative to bubble size. Having a strokeThickness of 0 can create a better visual.
We assign a DataSeries - which stores the Xyz data to render, where X,Y is position and Z is scale factor.

Note: Because the Bubble Series renders a single point-market but scales for each point, it is advisable not to use a Stroke on the PointMarker, as this could get pixellated when the bubble is scaled up or down. This approach of ours results in extremely high performance charts - hundreds of thousands of data-points are possible with SciChart.js.

Render a Gap in a Bubble Series

It is possible to have null points or gaps in a Bubble 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 Bubble Chart	Copy Code
const lineDataSeries = new XyDataSeries(wasmContext); const bubbleDataSeries = new XyzDataSeries(wasmContext); const POINTS = 20; let prevYValue = 0; for (let i = 0; i < POINTS; i++) { const curYValue = Math.sin(i) * 10 - 5; const size = Math.sin(i) * 60 + 3; lineDataSeries.append(i, i % 5 === 0 ? NaN : prevYValue + curYValue); bubbleDataSeries.append(i, i % 5 === 0 ? NaN : prevYValue + curYValue, size); prevYValue += curYValue; } lineSeries.dataSeries = lineDataSeries; bubbleSeries.dataSeries = bubbleDataSeries;

JavaScript Discontinuous Bubble Chart

Copy Code

const lineDataSeries = new XyDataSeries(wasmContext);
const bubbleDataSeries = new XyzDataSeries(wasmContext);
const POINTS = 20;
let prevYValue = 0;
for (let i = 0; i < POINTS; i++) {
    const curYValue = Math.sin(i) * 10 - 5;
    const size = Math.sin(i) * 60 + 3;
    lineDataSeries.append(i, i % 5 === 0 ? NaN : prevYValue + curYValue);
    bubbleDataSeries.append(i, i % 5 === 0 ? NaN : prevYValue + curYValue, size);
    prevYValue += curYValue;
}
lineSeries.dataSeries = lineDataSeries;
bubbleSeries.dataSeries = bubbleDataSeries;

Results in this:

Different Point-Markers on a Bubble Series

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

EllipsePointMarker - Renders a circle at each point
SquarePointMarker - Renders a square at each point
TrianglePointMarker - Renders a triangle at each point
CrossPointMarker - Renders a plus sign '+' at each point
XPointMarker - Renders an 'x' at each point
SpritePointMarker - Allows an image to be used at each point to create custom pointmarkers

Any of these can be used to create a bubble chart, for example, this code:

JavaScript Discontinuous Bubble Chart	Copy Code
// Bubble Series const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, { pointMarker: new SquarePointMarker(wasmContext, { width: 64, height: 64, strokeThickness: 0, fill: "#4682b477" }), }); sciChartSurface.renderableSeries.add(bubbleSeries);

JavaScript Discontinuous Bubble Chart

Copy Code

// Bubble Series
const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {
    pointMarker: new SquarePointMarker(wasmContext, {
        width: 64,
        height: 64,
        strokeThickness: 0,
        fill: "#4682b477"
    }),
});
sciChartSurface.renderableSeries.add(bubbleSeries);

Results in this:

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

There is also a dedicated Scatter Series type with some more options.

Painting Bubbles with Different Colors

Bubble 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 FastBubbleRenderableSeries.paletteProvider property. This allows you to colour data-points based on values, or custom rules with infinite extensiblity.

Paletted Line example	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) })); // Bubble Series const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, { pointMarker: new EllipsePointMarker(wasmContext, { width: 64, height: 64, strokeThickness: 0, fill: "#4682b477", }), // Optional: Allows per-point colouring of bubble stroke paletteProvider: new BubblePaletteProvider(), }); sciChartSurface.renderableSeries.add(bubbleSeries); /** * An example PaletteProvider which implements IPointMarkerPaletteProvider * This can be attached to Scatter or Bubble series to change the stroke or fill * of the series point-markers conditionally / class BubblePaletteProvider implements IPointMarkerPaletteProvider { /* * This property chooses how stroke colors are blended when they change. * Bubble Series, however, supports solid color interpolation only. */ public readonly strokePaletteMode = EStrokePaletteMode.SOLID; public onAttached(parentSeries: IRenderableSeries): void {} public onDetached(): void {} overridePointMarkerArgb(xValue: number, yValue: number, index: number): TPointMarkerArgb { if (xValue >= 10 && xValue <= 12) { return { fill: 0xffff82b4, stroke: 0xffff82b4, }; } return undefined; } }

Paletted Line example

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

// Bubble Series
const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {
    pointMarker: new EllipsePointMarker(wasmContext, {
        width: 64,
        height: 64,
        strokeThickness: 0,
        fill: "#4682b477",
    }),
    // Optional: Allows per-point colouring of bubble stroke
    paletteProvider: new BubblePaletteProvider(),
});
sciChartSurface.renderableSeries.add(bubbleSeries);

/**
 * An example PaletteProvider which implements IPointMarkerPaletteProvider
 * This can be attached to Scatter or Bubble series to change the stroke or fill
 * of the series point-markers conditionally
 */
class BubblePaletteProvider implements IPointMarkerPaletteProvider {
    /**
     * This property chooses how stroke colors are blended when they change.
     * Bubble Series, however, supports solid color interpolation only.
     */
    public readonly strokePaletteMode = EStrokePaletteMode.SOLID;
    public onAttached(parentSeries: IRenderableSeries): void {}
    public onDetached(): void {}
    overridePointMarkerArgb(xValue: number, yValue: number, index: number): TPointMarkerArgb {
        if (xValue >= 10 && xValue <= 12) {
            return {
                fill: 0xffff82b4,
                stroke: 0xffff82b4,
            };
        }
        return undefined;
    }
}

The code above results in a JavaScript Bubble Chart with the following output. XValues >= 10 and <= 12 are colored purple whilst other values have the default stroke and fill.