The Digital (Step) Band Series Type
A Digital Band Series, or High-Low Fill between two Digital or Step lines can be created using the FastBandRenderableSeries type.
The JavaScript Digital Band Chart Example can be found in the SciChart.Js Examples Suite on Github, or our live demo at demo.scichart.com
Create a Digital Band Series
To create a Javascript Digital Band Chart with SciChart.js, use the following code:
| JavaScript Line Chart |
Copy Code
|
|---|---|
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";
// 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 = 1000;
const STEP = (3 * Math.PI) / POINTS;
for (let i = 0; i <= 1000; i++) {
const k = 1 - i / 2000;
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";
|
|
In the code above:
- A Band Series instance is created and added to the SciChartSurface.renderableSeries collection.
- We set the stroke, fill properties for when Y1 > Y2 and vice versa (more info over at FastBandRenderableSeries in TypeDoc).
- We set the isDigitalLine property to true.
- We assign a DataSeries - in this case an XyyDataSeries which stores X, Y1, Y2 data.
Render a Gap in a Digital Band Series
It is possible to have null points or gaps in a Digital Band 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 XyyDataSeries(wasmContext); const POINTS = 1000; const STEP = (3 * Math.PI) / POINTS; for (let i = 0; i <= 1000; i++) { const k = 1 - i / 2000; dataSeries.append(i, i % 100 < 20 ? NaN : 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 }); |
|
Results in this:
See Also