SciChart.js - High Performance Realtime Javascript Charts Examples Suite
Demonstrates how to create a JavaScript Bubble Chart using SciChart.js, High Performance JavaScript Charts
Source Code
import * as React from "react";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { FastBubbleRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastBubbleRenderableSeries";
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumberRange } from "scichart/Core/NumberRange";
import { EllipsePointMarker } from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { XyzDataSeries } from "scichart/Charting/Model/XyzDataSeries";
import {
EFillPaletteMode,
EStrokePaletteMode,
IFillPaletteProvider,
IPointMarkerPaletteProvider,
TPointMarkerArgb
} from "scichart/Charting/Model/IPaletteProvider";
import { IRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/IRenderableSeries";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { parseColorToUIntArgb } from "scichart/utils/parseColor";
const divElementId = "chart";
const drawExample = async () => {
// Create a SciChartSurface with X,Y Axis
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"
}),
// Optional: Allows per-point colouring of bubble stroke
paletteProvider: new BubblePaletteProvider()
});
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;
}
// Assign dataSeries to renderableSeries
lineSeries.dataSeries = lineDataSeries;
bubbleSeries.dataSeries = bubbleDataSeries;
// Add some zooming and panning behaviour
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.zoomExtents();
return { sciChartSurface, wasmContext };
};
/**
* Optional: 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 IFillPaletteProvider {
/**
* This property chooses how fill colors are blended when they change.
* Bubble Series, however, supports solid color interpolation only.
*/
public readonly fillPaletteMode = EFillPaletteMode.SOLID;
private fill: number = parseColorToUIntArgb("red");
public onAttached(parentSeries: IRenderableSeries): void {}
public onDetached(): void {}
public overrideFillArgb(xValue: number, yValue: number, index: number): number {
return xValue >= 10 && xValue <= 12 ? this.fill : undefined;
}
}
export default function BubbleChart() {
const [sciChartSurface, setSciChartSurface] = React.useState<SciChartSurface>();
React.useEffect(() => {
(async () => {
const res = await drawExample();
setSciChartSurface(res.sciChartSurface);
})();
// Delete sciChartSurface on unmount component to prevent memory leak
return () => sciChartSurface?.delete();
}, []);
return <div id={divElementId} style={{ maxWidth: 900 }} />;
}
// JavaScript Chart Examples
SciChart.js ships with ~40 JavaScript Chart Examples which you can browse, play with, view the source code and see related documentation. All of this is possible with the SciChart.js Examples Suite, which ships as part of the SciChart.js SDK
Description
Demonstrates how to create a JavaScript Bubble Chart. This is a chart type which draws point-marker (Ellipse, Square, Triangle or Custom) at X,Y locations.
The FastBubbleRenderableSeries requires an XyzDataSeries, which contains X,Y,Z data. The size or scale of the point is defined by a Z-point.
If you share a single XyzDataSeries between Line and Bubble Renderable Series, the line will render the X-Y points while the Bubble will render the X-Y-Z points.