SciChart.js - High Performance Realtime Javascript Charts Examples Suite
Demonstrates how to create a JavaScript Digital Band Chart or High-Low Fill 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 { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { XyyDataSeries } from "scichart/Charting/Model/XyyDataSeries";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastBandRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastBandRenderableSeries";
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumberRange } from "scichart/Core/NumberRange";
import { EAxisAlignment } from "scichart/types/AxisAlignment";
const divElementId = "chart";
const drawExample = async () => {
// Create a SciChartSurface
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId);
// Add an XAxis, YAxis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisAlignment: EAxisAlignment.Top }));
sciChartSurface.yAxes.add(
new NumericAxis(wasmContext, { axisAlignment: EAxisAlignment.Left, growBy: new NumberRange(0.4, 0.4) })
);
// The bandseries requires a special dataseries type called XyyDataSeries
// This stores X, Y1, Y2 point data for the two lines in the band
const dataSeries = new XyyDataSeries(wasmContext);
const POINTS = 50;
const STEP = (3 * Math.PI) / POINTS;
for (let i = 0; i <= POINTS; i++) {
const k = 1 - i / 100;
dataSeries.append(i, Math.sin(i * STEP) * k * 0.7, Math.cos(i * STEP) * k);
}
// Create the band series and add to the chart
const rendSeries = new FastBandRenderableSeries(wasmContext, {
dataSeries,
strokeThickness: 2,
isDigitalLine: true
});
sciChartSurface.renderableSeries.add(rendSeries);
rendSeries.fill = "#279B2733";
rendSeries.fillY1 = "#FF191933";
rendSeries.stroke = "#FF1919FF";
rendSeries.strokeY1 = "#279B27FF";
// Optional: Add some interactivity modifiers
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier());
sciChartSurface.zoomExtents();
return { wasmContext, sciChartSurface };
};
let scs: SciChartSurface;
export default function DigitalBandSeriesChart() {
React.useEffect(() => {
(async () => {
const res = await drawExample();
scs = res.sciChartSurface;
})();
// Delete sciChartSurface on unmount component to prevent memory leak
return () => scs?.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 Digital Band Chart. This is a chart type which draws a digital area (polygon or fill) between two lines. The FastBandRenderableSeries requires an XyyDataSeries, which contains one X-point and two Y-points
Dual lines are drawn by the stroke, strokeY1 properties and shaded bands are drawn by the fill and fillY1 properties, depending on whether y1 is greater than y2
If you have data where Y1 is greater than Y2 always, you’ll get an envelope effect. Great for rendering confidence intervals, error margins or Bollinger Bands!