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

A Digital (Step) Mountain or area Series can be created using the FastMountainRenderableSeries type.

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

Create a Digital Mountain Series

To create a Javascript Digital Mountain Chart with SciChart.js, use the following code:

JavaScript Line Chart
Copy Code
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId);
sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, {
        axisAlignment: EAxisAlignment.Top,
        axisTitle: "X-Axis",
    })
);
sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
        axisAlignment: EAxisAlignment.Left,
        growBy: new NumberRange(0.05, 0.05),
        axisTitle: "Y-Axis",
        labelFormat: ENumericFormat.Decimal_2,
    })
);
const mountainSeries = new FastMountainRenderableSeries(wasmContext, {
    stroke: "#4682b4",
    strokeThickness: 2,
    zeroLineY: 0.0,
    fill: "rgba(176, 196, 222, 0.7)", // when a solid color is required, use fill
    fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [ // when a gradient is required, use fillLinearGradient
        { color: "rgba(70,130,180,1)", offset: 0 },
        { color: "rgba(70,130,180,0.2)", offset: 1 },
    ]),
   isDigitalLine: true,
});
sciChartSurface.renderableSeries.add(mountainSeries);
const dataSeries = new XyDataSeries(wasmContext);
const POINTS = 1000;
const STEP = (3 * Math.PI) / POINTS;
for (let i = 0; i <= 1000; i++) {
    dataSeries.append(i, Math.abs(Math.sin(i * STEP)));
}
mountainSeries.dataSeries = dataSeries;

In the code above:

  • A Mountain Series instance is created and added to the SciChartSurface.renderableSeries collection.
  • We set the stroke, strokethickness and fill properties
  • ZeroLineY defines where the zero crossing is. The default is 0.0
  • We set the isDigitalLine property to true to create a Step-line over the mountain chart.
  • We assign a DataSeries - which stores the Xy data to render.

Render a Gap in a Digital (Step) Mountain Series

It is possible to have null points or gaps in a Digital (Step) Mountain 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 FastMountainRenderableSeries type, 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 Line Chart
Copy Code
const dataSeries = new XyDataSeries(wasmContext);
const POINTS = 100;
const STEP = (3 * Math.PI) / POINTS;
for (let i = 0; i <= 1000; i++) {
    dataSeries.append(i, i % 10 < 5 ? NaN : Math.abs(Math.sin(i * STEP)));
}

const mountainSeries = new FastMountainRenderableSeries(wasmContext, {
    stroke: "#4682b4",
    strokeThickness: 2,
    zeroLineY: 0.0,
    isDigitalLine: true,
    fill: "rgba(176, 196, 222, 0.7)", // is not used, because we have fillLinearGradient
    fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
        { color: "rgba(70,130,180,1)", offset: 0 },
        { color: "rgba(70,130,180,0.2)", offset: 1 },
    ]),
});

Results in this:

Add Point Markers onto a Digital (Step) Mountain Series

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

Adding PointMarkers to a Mountain Chart
Copy Code
const mountainSeries = new FastMountainRenderableSeries(wasmContext, {
    stroke: "#4682b4",
    strokeThickness: 2,
    zeroLineY: 0.0,
    isDigitalLine: true,
    pointMarker: new EllipsePointMarker(wasmContext,
        {width: 5, height: 5, fill: "white", stroke: "Blue", strokeThickness: 1}),
    fill: "rgba(176, 196, 222, 0.7)", // is not used, because we have fillLinearGradient
    fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
        { color: "rgba(70,130,180,1)", offset: 0 },
        { color: "rgba(70,130,180,0.2)", offset: 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 Step Mountain Segments with Different Colors

Step Mountain 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 IStrokePaletteProvider and IFillPaletteProvider interfaces. Then, apply this to the FastMountainRenderableSeries.paletteProvider property. This allows you to colour data-points based on values, or custom rules with infinite extensiblity.

Paletted Line example
Copy Code
const mountainSeries = new FastMountainRenderableSeries(wasmContext, {
    stroke: "#4682b4",
    strokeThickness: 2,
    zeroLineY: 0.0,
    isDigitalLine: true,
    paletteProvider: new MountainPaletteProvider(),
    fill: "rgba(176, 196, 222, 0.7)", // is not used, because we have fillLinearGradient
    fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
        { color: "rgba(70,130,180,1)", offset: 0 },
        { color: "rgba(70,130,180,0.2)", offset: 1 },
    ]),
});

/**
 * An example PaletteProvider which implements IStrokePaletteProvider and IFillPaletteProvider
 * This can be attached to line, mountain, column or candlestick series to change the stroke or fill
 * of the series conditionally
 */
class MountainPaletteProvider implements IStrokePaletteProvider, IFillPaletteProvider {
    /**
     * This property chooses how stroke colors are blended when they change
     */
    public readonly strokePaletteMode: EStrokePaletteMode = EStrokePaletteMode.GRADIENT;
    /**
     * This property chooses how fills are blended when they change
     */
    public readonly fillPaletteMode: EFillPaletteMode = EFillPaletteMode.GRADIENT;
    private fillColor: number = parseColorToUIntArgb("#FF000077");
    private strokeColor: number = parseColorToUIntArgb("#FF0000");
    onAttached(parentSeries: IRenderableSeries): void { }
    onDetached(): void { }
    /**
     * Called by SciChart and may be used to override the color of filled polygon in various chart types.
     * @remarks WARNING: CALLED PER-VERTEX, MAY RESULT IN PERFORMANCE DEGREDATION IF COMPLEX CODE EXECUTED HERE
     * @param renderSeries
     * @returns an ARGB color code, e.g. 0xFFFF0000 would be red, or 'undefined' for default colouring
     */
    overrideFillArgb(xValue: number, yValue: number, index: number): number {
        return yValue > 0.8 ? this.fillColor : undefined;
    }
    /**
     * 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
     * @returns an ARGB color code, e.g. 0xFFFF0000 would be red, or 'undefined' for default colouring
     */
    overrideStrokeArgb(xValue: number, yValue: number, index: number): number {
        return yValue > 0.8 ? this.strokeColor : undefined;
    }
}

The code above results in a JavaScript Digital Mountain Chart with the following output. YValues > 0.8 are colored red, and YValues < 0.8 are the default series colors.