SciChart.js JavaScript 2D Charts API > 2D Chart Types > The Digital (Step) Line Series
The Digital (Step) Line Series

Digital, or Step Line Series can be created using the FastLineRenderableSeries type.

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

Create a Digital (Step) Line Series

To create a JavaScript Digital Line Chart with SciChart.js, use the following code:

JavaScript Digital Line Chart
Copy Code
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

const xyDataSeries= new XyDataSeries(wasmContext);
for (let i = 0; i < 100; i++) {
    xyDataSeries.append(i, Math.sin(i * 0.1));
}
// Pass isDigitalLine: true to the constructor options
const lineSeries = new FastLineRenderableSeries(wasmContext, { 
   stroke: "#ff6600",
   strokeThickness: 5,
   dataSeries: xyDataSeries,
   isDigitalLine: true
});
// Alternatively, set lineSeries.isDigitalLine = true
sciChartSurface.renderableSeries.add(lineSeries);

In the code above:

  • A Line Series instance is created and added to the SciChartSurface.renderableSeries collection.
  • We set the stroke, strokethickness properties
  • We set the isDigitalLine property
  • We assign a DataSeries - which stores the Xy data to render.

Render a Gap in a Digital (Step) Line Series

It is possible to have null points or gaps in a Digital Line 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. The FastLineRenderableSeries, however, allows to specify how a gap should appear. There are several modes defined in the ELineDrawMode enumeration, which can be applied via the BaseRenderableSeries.drawNaNAs property.

Changing the above code as follows:

JavaScript Discontinuous Digital Line Chart
Copy Code
const xyDataSeries = new XyDataSeries(wasmContext);
for (let i = 0; i < 100; i++) {
    xyDataSeries.append(i, i % 10 === 0 ? NaN : Math.sin(i * 0.1));
}
const lineSeries = new FastLineRenderableSeries(wasmContext, {
    stroke: "#ff6600",
    strokeThickness: 5,
    dataSeries: xyDataSeries,
    drawNaNAs: ELineDrawMode.DiscontinuousLine,
    isDigitalLine: true
});

Results in this:

 

 

Add Point Markers onto a Digital (Step) Line Series

Every data point of a Digital Line Series can be marked with a PointMarker. To add Point Markers to the Digital Line Series, use the following code:

Adding PointMarkers to a Digital Line Chart
Copy Code
const lineSeries = new FastLineRenderableSeries(wasmContext, {
    stroke: "#ff6600",
    strokeThickness: 5,
    dataSeries: xyDataSeries,
    isDigitalLine: true,
    pointMarker: new EllipsePointMarker(wasmContext, {
        width: 7,
        height: 7,
        fill: "white",
        stroke: "#ff6600",
        strokeThickness: 1})
});

This results in the following:

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 and a Bubble Series type with some more options.

Painting Digital Line Segments with Different Colors

Digital Line series can be colored per-point or per line-segment using the PaletteProvider API. To use this, we must create a class (typescript) or object (javascript) which implements or confirms to the IStrokePaletteProvider interface. Then, apply this to the FastLineRenderableSeries.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);
// Create XAxis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
    axisTitle: "X Axis",
    growBy: new NumberRange(0.1, 0.1),
}));
// Create YAxis
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    axisTitle: "Right Y Axis",
    growBy: new NumberRange(0.1, 0.1),
}));
// Create a line series with a PaletteProvider. See implementation of LinePaletteProvider below
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "White",
    strokeThickness: 5,
    isDigitalLine: true,
    dataSeries: createLineData(wasmContext),
    paletteProvider: new LinePaletteProvider()
}));
/**
 * An example PaletteProvider which implements IStrokePaletteProvider.
 * This can be attached to line, mountain, column or candlestick series to change the stroke of the series conditionally
 */
class LinePaletteProvider implements IStrokePaletteProvider {
    /**
     * This property chooses how colors are blended when they change
     */
    readonly strokePaletteMode: EStrokePaletteMode = EStrokePaletteMode.GRADIENT;
    onAttached(parentSeries: IRenderableSeries): void { }
    onDetached(): void { }
    /**
     * Called by SciChart and may be used to override the color of a line segment or
     * stroke outline in various chart types.
     * @remarks WARNING: CALLED PER-VERTEX, MAY RESULT IN PERFORMANCE DEGREDATION IF COMPLEX CODE EXECUTED HERE
     * @param renderSeries
     * @param xValue the current XValue
     * @param yValue the current YValue
     * @param index the current index to the data
     * @returns an ARGB color code, e.g. 0xFFFF0000 would be red, or 'undefined' for default colouring
     */
    overrideStrokeArgb(xValue: number, yValue: number, index: number): number {
        // Conditional logic for coloring here. Returning 'undefined' means 'use default renderableSeries.stroke'
        // else, we can return a color of choice.
        //
        // Note that colors returned are Argb format as number. There are helper functions which can convert from Html
        // color codes to Argb format.
        //
        // Performance considerations: overrideStrokeArgb is called per-point on the series when drawing.
        // Caching color values and doing minimal logic in this function will help performance
        return yValue > 0 ? parseColorToUIntArgb("Red") : undefined;
    }
}

The code above results in a JavaScript Digital Line Chart with the following output. YValues > 0 are colored red, and YValues < 0 are the default series stroke color.