The Spline (Smoothed) Mountain Series Type

Spline Mountain or Smoothed Area Series can be created using the SplineMountainRenderableSeries type.

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

Create a Spline Mountain Series

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

JavaScript Line Chart	Copy Code
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId); sciChartSurface.xAxes.add(new NumericAxis(wasmContext)); sciChartSurface.yAxes.add(new NumericAxis(wasmContext)); const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; const yValues = [50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60]; // Create an XyDataSeries as data source const xyDataSeries = new XyDataSeries(wasmContext); xyDataSeries.appendRange(xValues, yValues); const mountainSeries = new SplineMountainRenderableSeries(wasmContext, { interpolationPoints: 10, // Sets number of points to interpolate to smooth the line stroke: "#4682b4", strokeThickness: 5, zeroLineY: 0.0, 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 } ]), pointMarker: new EllipsePointMarker(wasmContext, { width: 7, height: 7, stroke: "#006400", fill: "#FFFFFF" }), dataSeries: xyDataSeries }); sciChartSurface.renderableSeries.add(mountainSeries);

JavaScript Line Chart

Copy Code

const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
const yValues = [50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60];
// Create an XyDataSeries as data source
const xyDataSeries = new XyDataSeries(wasmContext);
xyDataSeries.appendRange(xValues, yValues);
const mountainSeries = new SplineMountainRenderableSeries(wasmContext, {
    interpolationPoints: 10, // Sets number of points to interpolate to smooth the line
    stroke: "#4682b4",
    strokeThickness: 5,
    zeroLineY: 0.0,
    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 }
    ]),
    pointMarker: new EllipsePointMarker(wasmContext, { width: 7, height: 7, stroke: "#006400", fill: "#FFFFFF" }),
    dataSeries: xyDataSeries
});
sciChartSurface.renderableSeries.add(mountainSeries);

In the code above:

A Spline Mountain Series instance is created and added to the SciChartSurface.renderableSeries collection.
We set the stroke, strokethickness properties
We assign a DataSeries - which stores the Xy data to render.
We set the number of interpolationPoints - how many points between real Xy data points will be interpolated using a Spline interpolation algorithm.

Performance Tips in Spline Series

When the SplineMountainRenderableSeries.interpolationPoints property is set to zero, then this series renders and displays exactly like a FastLineRenderableSeries.

When the interpolationPoints property is set to another number, e.g. 10, then SciChart.js will calculate 10 points for each Xy datapoint you add to the XyDataSeries. This means you will be displaying 10x the number of datapoints.

SciChart.js can handle millions of datapoints, but this is something to be aware of. You might want to adjust down the interpolationPoints depending on amount of data on the chart, or zoom level.

Render a Gap in a Spline Mountain Series

It is possible to have null points or gaps in Spline 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 SplineMountainRenderableSeries, 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.

Add Point Markers onto a Spline Line Series

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

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

Adding PointMarkers to a Line Chart

Copy Code

const lineSeries = new SplineLineRenderableSeries(wasmContext, {
    stroke: "#ff6600",
    strokeThickness: 5,
    dataSeries: xyDataSeries,
    interpolationPoints: 10
    pointMarker: new EllipsePointMarker(wasmContext, {
        width: 7,
        height: 7,
        fill: "white",
        stroke: "#ff6600",
        strokeThickness: 1})
});

Note: PointMarkers are only applied to the original data-points, not the spline interpolated points which are for display purposes only.

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 Spline Line Segments with Different Colors

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 SplineMountainRenderableSeries.paletteProvider property. This allows you to colour data-points based on values, or custom rules with infinite extensiblity.