What's New? > What's New in SciChart.js SDK v2.x
What's New in SciChart.js SDK v2.x

SciChart.js v2.x is a huge upgrade from version 1.x. Our team has worked very hard to bring you lots of features that you requested, and improve the overall quality, reliability and performance of our WebAssembly / WebGL powered JavaScript Charts.

Find out what's new in this major release below:

Style and Data Animations

As well as startup animations that sweep or fade a series when the chart is first shown, SciChart.js now features style and data animations.

This let's you animate style properties on series (stroke, strokethickness, fill) as well as entire datasets.

Read more in the Animations API Docs.


Builder API

A brand new API in SciChart.js - the Builder API - allows you to construct SciChartSurfaces with a JSON or Javascript object definition.

For example this:

import { chartBuilder } from "scichart/Builder/chartBuilder";
import { EThemeProviderType } from "scichart/types/ThemeProviderType";
import { EAxisType } from "scichart/types/AxisType";
import { EChart2DModifierType } from "scichart/types/ChartModifierType";
import { ESeriesType } from "scichart/types/SeriesType";
import { NumberRange } from "scichart/Core/NumberRange";
// ...
const { sciChartSurface, wasmContext } = await chartBuilder.buildChart(divElementId, {
     surface: {
         theme: {
             type: EThemeProviderType.Light
     series: {
         type: ESeriesType.LineSeries,
         options: { stroke: "blue" },
         xyData: {
             xValues: [1, 3, 4, 7, 9],
             yValues: [10, 6, 7, 2, 16]
     yAxes: {
         type: EAxisType.NumericAxis,
         options: {
             axisTitle: "Number of things",
             visibleRange: new NumberRange(0, 20),
             labelPrecision: 0
     modifiers: [
         { type: EChart2DModifierType.Rollover },
         { type: EChart2DModifierType.ZoomPan }

Results in this:

Read more in the Builder API Docs.

JSON Serialization / Deserialization

The Builder API also allows JSON Serialization / Deserialization. It is now possible to construct chart definitions including data server-side, and reconstruct the SciChart.js chart client side.

Read more in the JSON Serialization Docs.

Point Metadata

SciChart.js v2.x now features a PointMetadata API, comparable to our iOS Android and Windows charts. This API allows you to tag some or all x,y datapoints with a custom object, which can then be routed through to Tooltips, Hit-Test or PaletteProvider for dynamic colouring of chart segments.

For example this:

// Create metadata in a DataSeries
const dataSeries = new XyDataSeries(wasmContext, {
     xValues: [1, 2, 3, 4],
     yValues: [4.3, 5.3, 6, 6.3],
     metadata: [
         { isSelected: false, note: "This"},
         { isSelected: false, note: "is"},
         { isSelected: false, note: "some"},
         { isSelected: false, note: "metadata"}

// Add a line series to chart
const series = new FastLineRenderableSeries(wasmContext, { dataSeries, strokeThickness: 5 });
// Define a function to show metadata in tooltips
 const metadataTooltipDataTemplate = (seriesInfo) => {
     const valuesWithLabels = [];
     if (seriesInfo.pointMetadata) {
         valuesWithLabels.push("Note: " + seriesInfo.pointMetadata.note);
     valuesWithLabels.push("X: " + seriesInfo.formattedXValue + " Y: " + seriesInfo.formattedYValue);
     return valuesWithLabels;
// Add a tooltip
 sciChartSurface.chartModifiers.add(new RolloverModifier({tooltipDataTemplate: metadataTooltipDataTemplate }));

Results in this:

Read more in the PointMetadata API Docs.

Series Selection

We've added Series Selection on click, and Hover events to SciChart.js v2.x. With the new SeriesSelectionModifier, you can get notified if a user clicked or hovered a series, and make some visual changes such as changing or animating series style.

Read more in the SeriesSelectionModifier Docs.

Datapoint Selection

We've also added Datapoint Selection into SciChart.js v2.x. You can now click select individual datapoints, drag to select multiple datapoints, get notified on click and display visual feedback. To use this feature, add a DataPointSelectionModifier to your chart.


Read more in the DatapointSelectionModifier Docs.

Filters (Data Transforms) API

SciChart.js now features a Filters or Data Transforms API. This allows you to add data transforms such as Linear Trendlines, Moving Averages, Scale/Offset, or Ratio of two DataSeries to your chart. Filters automatically update when the underlying data changes, making it easy to apply transforms to your data.

What's more, you can create custom filters easily if you wanted to add any other kind of behaviour.

Read more in the Filters API Docs.

Transparent, Image or Blurred Backgrounds

In SciChart.js v2.x, we've completely re-written the way we composite WebGL powered JavaScript Charts onto the HTML page, allowing you to now create charts with transparent backgrounds, image backgrounds or even blurred/glass effect backgrounds.

Create stunning JavaScript charts with SciChart's flexible styling & theming API!

Read more in the Styling and Theming Docs.

Loader Customisation

More styling & Theming changes in SciChart.js v2.x, you can now style the wait-loader, displayed when the chart initially starts up.

Styling options include simple changing of foreground & background colours, right through to customizing the DOM which is displayed as the chart loads for the first time.

Read more in the Styling and Theming Docs.

SciChartOverview control

After requests from our userbase, we've added the SciChartOverview control to SciChart.js v2.x. This is a Scrollbar control which lets you see an overview of your dataset, and scroll left/right at the touch of a button.

It works on vertical or horizontal charts, you can customize what series get displayed behind the overview, and customize the look & feel of the scroll grips and selection rectangle too.

Read more in the SciChartOverview Docs.

Logarithmic Axis

Another hotly requested feature, we've added a Logarithmic Axis to SciChart.js v2! Display charts with a logarithmic scale, on either X or Y axis, with a user-defined base. For example Log(10) charts, Log(e) for scientific applications or Log(2) for finance & trading.

You can specify the label format to display scientific notation with superscript, engineering notation or N-significant figures. Major and minor ticks can be displayed in linear or logarithmic scale.

Read more in the Logarithmic Axis Docs.

Central / Inner Axis

We've added further customisations to the axis in SciChart.js v2. You can now place an X,Y axis in the center of the chart to create oscilloscope like graphs, or inside the chart as opposed to fixed on the outside of the chart area. Placement of the axis is fully customisable.

Read more in the Central / Inside Axis Docs.

Vertically Stacked Axis

There's another axis customisation which we've added! Vertically Stacked Axis allows you to change the layout of axis panels.

Instead of left to right for Y-Axis, you can now layout several axis top to bottom. This gives you layout options like this. Perfect for EEG / ECG like charts where you want to display several overlapping traces on a single SciChartSurface.

Read more in the Vertically Stacked Axis Docs.

Retina and DPI Awareness / Browser Zoom

SciChart.js v2.x now supports sharp graphics on high resolution Retina displays, as well as Browser Zoom functionality.

Previously in SciChart.js, retina displays would look low quality, and when the browser is zoomed the image that SciChart renders to would simply be scaled. In SciChart.js v2, every element is now rendered at the native resolution and scaled down for display. This results in the following benefits:

  1. Lines, strokes, shapes now look sharper and clearer on higher DPI displays or when browser is zoomed
  2. Text is rendered at a higher resolution. Text scales with browser zoom (good for Accessibility)
  3. Stroke thickness (line pen) increases with Browser Zoom

Take a look below to see some comparison images side by side of SciChart.js v1 vs. v2 at 200% Browser zoom in Chrome.

Axis Label Customization

There are now several ways to customise axis labels in SciChart.js v2. SciChart now supports rotated axis labels, multi-line axis labels and even image labels. All this and more is possible via our Custom LabelProviders API.

Read more in the Custom LabelProviders Docs.

Text Label Provider

Guess what, we've also added a way to natively put text labels onto an axis. The TextLabelProvider provides text labels rather than numeric. Specify text labels as an array with a mapping and our library displays them on the axis. This also features a rudimentary word wrapping algorithm for long labels.

Read more in the TextLabelProvider Docs.

Hit-Test Improvements

We've made multiple improvements to the Hit-Test API, allowing for greater control over what a hit (click) means on the chart.

You can now listen to mouse events and clicks on the chart and determine if the user:

  • Clicked on a series segment (e.g. column body, candle body, line series segment)
  • Clicked on an X-Y data-point
  • Finding the nearest point using X-first (for timeseries) or X-Y distance (for scatter series)

The Hit-Test API returns an object which describes which points or series were under or nearest the mouse, and may be used for getting click notifications on chart series, implementing drill-downs, custom interactions or behaviours and more.

Read more in the Hit-Test Provider Docs.

Miscellaneous Improvements

We've made lots of improvements into SciChart.js, including improving overall reliability, helpful error messages in the JavaScript console, improvements to the usability of APIs, improvements to documentation and examples plus much more.

If you're an existing user of SciChart.js or you've tried it out in the past, download SciChart.js v2 now and try it out! We would love to hear your feedback!


See Also