The RenderableSeries in SciChart are visual representations of X,Y Numeric or Date data. Other libraries call them 'Chart Types'.

Some RenderableSeries render simple X,Y values (2D points in space), while some render additional information (such as X,Y0,Y1 values, or X,Y,Z values).

1. Chart Types in SciChart.js

SciChart.js supports a number of 2D & 3D Chart types. These include:

2. Common 2D Chart Features

As well as just render 2D Data, a number of chart types support additional properties and features.

For example, most 2D Chart types in SciChart.js support:

3. The RenderableSeries Class

All 2D Chart types in SciChart.js are derived from the BaseRenderableSeries type. This is a JavaScript class which is added to the sciChartSurface.renderableSeries collection and is rendered using our own proprietary WebAssembly / WebGL based rendering engine.

Each RenderableSeries is rendered to the screen, displaying the data from an associated DataSeries.

Renderable Series Properties

The properties common to the BaseRenderableSeries class are listed below.

Constructor options on RenderableSeries

Every RenderableSeries has a set of constructor options allowing for fast initialization and setup by passing in a javascript object. Each property reflected on the series has an optional constructor option parameter.

For example this code:

const lineSeries = new FastLineRenderableSeries(wasmContext);
lineSeries.stroke = "Red";
lineSeries.strokeThickness = 3;
lineSeries.dataSeries = new XyDataSeries(wasmContext, {xValues, yValues});
lineSeries.isVisible = true;
lineSeries.opacity = 0.7;

is equivalent to this:

const lineSeries = new FastLineRenderableSeries(wasmContext, {
    stroke: "Red",
    strokeThickness: 3,
    dataSeries: new XyDataSeries(wasmContext, {xValues, yValues}),
    isVisible: true,
    opacity: 0.7
});

4. Where Next?

To learn about a specific chart type, and to find out how to configure them, visit the following pages:

• The Line Series Type
• The Scatter Series Type
• The Mountain Series Type

etc...