SciChart.js JavaScript 2D Charts API > 2D Chart Types > The Spline (Smoothed) Band Series Type
The Spline (Smoothed) Band Series Type

Spline Band or Smoothed High/Low Fill Series can be created using the SplineBandRenderableSeries type.

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

Create a Spline Band Series

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

JavaScript Line Chart
Copy Code
const dataSeries = new XyyDataSeries(wasmContext);
dataSeries.appendRange(xValues, yValues, y1Values); // Append some arrays of x,y and y1 values 
// Create the band series and add to the chart
const rendSeries = new SplineBandRenderableSeries(wasmContext, {
    dataSeries,
    strokeThickness: 2,
    interpolationPoints: 10, // Choose the number of points to interpolate for smoothing
});
rendSeries.fill = "#279B2733";
rendSeries.fillY1 = "#FF191933";
rendSeries.stroke = "#FF1919FF";
rendSeries.strokeY1 = "#279B27FF";
sciChartSurface.renderableSeries.add(rendSeries);

In the code above:

  • A Spline Band Series instance is created and added to the SciChartSurface.renderableSeries collection.
  • We set the stroke, strokeY1, strokethickness properties
  • We assign an XyyDataSeries - which stores the Xyy 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 SplineBandRenderableSeries.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 Band Series

It is possible to have null points or gaps in Spline Band Series by passing a data point with a NaN value as the Y / Y1 value. Please refer to the Common RenderableSeries Features article for more details. The SplineBandRenderableSeries, 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 Band Series

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

Adding PointMarkers to a Line Chart
Copy Code
// Create the band series and add to the chart
const rendSeries = new SplineBandRenderableSeries(wasmContext, {
    dataSeries,
    strokeThickness: 2,
    interpolationPoints: 10, // Choose the number of points to interpolate for smoothing
    pointMarker: new EllipsePointMarker(wasmContext, { width: 7, height: 7, fill: "#FFFFFF", stroke: "#006400" })
});
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 Band Segments with Different Colors

Band 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 and/or IFillPaletteProvider interface. Then, apply this to the SplineBandRenderableSeries.paletteProvider property. This allows you to colour data-points based on values, or custom rules with infinite extensiblity.