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.
etc...
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 | A 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 Series, Column 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:
etc...