SciChart.js JavaScript 2D Charts API > 2D Chart Types > RenderableSeries APIs > Common RenderableSeries Properties
Common RenderableSeries Properties

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

To get an understanding about RenderableSeries / DataSeries quickly, try our Tutorial on adding data to SciChart

Also, for more information about each chart type in SciChart.js, see the 'Series Types' pages, e.g.


Common Properties on all RenderableSeries

The common properties of the BaseRenderableSeries class are listed below.

Specific series types (chart types) are detailed in the following sections.

BaseRenderableSeries property Description
dataLabelProvider New to SciChart.js v3.0! The dataLabelprovider allows creation of per data-point text labels. Please see the Data Labels API section for a complete walk-through of text labels on chart series.
dataSeries The DataSeries is the data-source for the RenderableSeries. Please see  DataSeries API section for a complete walk-through of the DataSeries API
drawNanAs How to treat NAN (Not a number) values in the input dataSeries. See ELineDrawMode for a list of values.
pointMarker PointMarker is used to draw an optional point-marker at each data-point. Applicable to some series types only.
stroke A Stroke for lines, outlines and edges of this RenderableSeries. Acceptable values include RGB format e.g. "#FF0000", RGBA format e.g. "#FF000077" and RGBA format e.g. "rgba(255,0,0,0.5)"
strokeThickness The Stroke Thickness for lines, outlines and edges of this RenderableSeries
opacity An Opacity factor of the Series that controls its semi-transparency level, where value 1 means the Series is opaque; 0 means transparent.
xAxisId The XAxisId of the series allows you to attach a series to a specific axis. If you only have single X and Y Axis you can leave this default.
yAxisId The YAxisId of the series allows you to attach a series to a specific axis. If you only have single X and Y Axis you can leave this default.
isvisible When true, the series is visible. To hide a series, set IsVisible = false.
isVisibleChanged An EventHandler allowing you to subscribe to isVisible changed callbacks
effect An optional ShaderEffect for modifying the render output of a RenderableSeries.
paletteProvider The PaletteProvider API allows changing the color of a series on a per-point basis. For more details about the PaletteProvider API see the individual examples for Line SeriesColumn Series etc...
hitTestProvider The HitTestProvider exposes the Hit-Test API, used to determine whether a series has been clicked on, hovered or find the nearest Xy datapoint to a mouse coordinate.

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:

Setting properties of series
Copy 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:

Constructor parameters of series
Copy Code
const lineSeries = new FastLineRenderableSeries(wasmContext, {
    stroke: "Red",
    strokeThickness: 3,
    dataSeries: new XyDataSeries(wasmContext, {xValues, yValues}),
    isVisible: true,
    opacity: 0.7

Find out more how to configure each chart type on the following pages:



See Also

Renderable Series APIs