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