SciChart.js v3.0 Released!

We are pleased to announce that the SciChart.js v3.0 is now released! We welcome you to try out SciChart.js v3 and give us your feedback. 

This update includes loads of new features, improvements and bug-fixes.

This release is a drop-in replacement and it should be mostly backward compatible for users of SciChart.js version 2. However, breaking changes or behaviour changes can occur, so we suggest upgrading & testing, giving us your feedback before major production releases.

What’s New in SciChart.js v3.0?

Version 3.0 at a glance:

1. Complete re-work of the SciChart Brand, Examples and Style
2. New Native Text Rendering Engine
3. RenderableSeries DataLabels (text labels)
4. FastTextRenderableSeries
5. NativeTextAnnotation
6. New SubCharts API (Charts in charts)
7. New Non-Uniform heatmap series
8. HeatmapLegend control
9. Styling and Themeing improvements
10. Performance improvements
11. 40 Bugs Vanquished

1/ Complete re-work of the SciChart Brand, Examples and Styles

2/ New Native Text Rendering engine

We’ve created an entirely new native text rendering engine in WebGL. This allows us to create and draw fonts entirely in our graphics engine without needing the slower HTML5 canvas.

Our proprietary text-rendering engine now enables complex text such as:

• Arabic, Japanese, Chinese or Korean in 2D/3D Charts
• RTL text or Vertical text
• Text outline, high quality scaling & outline
• As well as Unicode characters in 2D and 3D charts

All hardware accelerated by our WebAssembly / WebGL graphics engine. This has enabled new features such as Data Labels and Text Series (see below) as well as performance improvements.

3/ RenderableSeries DataLabels (Text Labels)

SciChart.js now natively supports text labels on data-points on the following series types:

• Line Series
• Scatter Series
• Heatmap Series
• Column Series
• Mountain Series

What can DataLabels do?

Labels can have a font specified and be positioned on the chart. They are drawn as WebGL hardware accelerated text on the chart. They respond to animations and zoom and pan with the chart.

How fast are DataLabels?

We carried out internal performance testing to see how many labels can be drawn with our new API. SciChart enables complex annotated charts with tens of thousands of text labels. These performance numbers only apply to labels on-screen, with overlap culling the number of labels can be increased even further. 

Data Label Examples

Below are some examples of data labels applied to different series;

    // Create an add a column series
    sciChartSurface.renderableSeries.add(new FastColumnRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, {xValues, yValues}),
        // Fill & stroke support Hex strings and rgba()
        fill: appTheme.PaleSkyBlue + "77",
        stroke: appTheme.PaleSkyBlue,
        strokeThickness: 3,
        dataPointWidth: 0.7,
        cornerRadius: 10,
        // Optional datalabels on series. To enable set a style and position
        dataLabels: {
            horizontalTextPosition: EHorizontalTextPosition.Center,
            verticalTextPosition: EVerticalTextPosition.Top,
            style: { fontFamily: "Arial", fontSize: 16, padding: new Thickness(0,0,20,0) },
            color: appTheme.ForegroundColor,
        },
        // Optional series animation executed when series shows
        animation: new WaveAnimation({duration: 1000}),
        // Horizontal gradient in X. For Y gradient choose fillLinearGradient property
        paletteProvider: PaletteFactory.createGradient(
            wasmContext,
            new GradientParams(new Point(0, 0), new Point(1, 1), [
                {offset: 0, color: appTheme.VividOrange },
                {offset: 0.67, color: appTheme.VividSkyBlue },
                {offset: 1.0, color: appTheme.VividTeal }
            ]),
            { enableFill: true }
        )
    }));

which results in the following output: scichart.com/example/javascript-chart/javascript-column-chart

JavaScript Column Chart

Or this adding text data-labels to heatmap cells: scichart.com/example/javascript-chart/javascript-non-uniform-heatmap-chart

    // Create the NonUniform Heatmap Series
    const heatmapSeries = new NonUniformHeatmapRenderableSeries(wasmContext, {
        // DataSeries defines data. This contains zValues 2D array plus the x and y cell offsets
        dataSeries: new NonUniformHeatmapDataSeries(wasmContext, { zValues, xCellOffsets, yCellOffsets }),
        // Color map defines how heatmap cells map to colours between minimum & maximum
        colorMap: new HeatmapColorMap({
            minimum: 0,
            maximum: 100,
            gradientStops: [
                { offset: 0, color: appTheme.DarkIndigo },
                { offset: 0.2, color: appTheme.Indigo },
                { offset: 0.3, color: appTheme.VividSkyBlue },
                { offset: 0.5, color: appTheme.VividGreen },
                { offset: 0.7, color: appTheme.MutedRed },
                { offset: 0.9, color: appTheme.VividOrange },
                { offset: 1, color: appTheme.VividPink },
            ]
        }),
        // optional settings
        opacity: 0.77,
        // values outside of the colorMap.min/max will be filled with the colours at edge of the colormap
        fillValuesOutOfRange: true,
        // add datalabels to the cells of the heatmap
        dataLabels: {
            style: {
                fontFamily: "Arial",
                fontSize: 16,
            },
            color: appTheme.ForegroundColor
        }
    });

Which places text labels in heatmap cells like this:

JavaScript Non-Uniform Heatmap Chart

Text Data Labels also have many configuration options, such as custom-text, label culling, formatting, custom placement or colouring. Find out more at scichart.com/example/javascript-chart/javascript-datalabels

JavaScript Chart Text Data Labels

Learn more about this API at the DataLabels documentation page.

4/ FastTextRenderableSeries

A new Text series called FastTextRenderableSeries has been created. This allows you to specify arbitrary text labels on a chart at specific X & Y datapoints. For example, the following code:

// data is { xValues: number[], yValues: number[], textValues: string[] }
const data: { xValues: number[], yValues: number[], textValues: string[] } = await fetch("/api/tweetData").then(r => r.json());
const series = new FastTextRenderableSeries(wasmContext, {
    dataLabels: { style: { fontFamily: "arial", fontSize: 10 }, calculateTextBounds: false },
    dataSeries: new XyTextDataSeries(wasmContext, data)
});
sciChartSurface.renderableSeries.add(series);

Results in this output.

JavaScript Text / Word Cloud Chart

The FastTextRenderableSeries allows placement of thousands of text labels at areas of interest, on x,y datapoints which zoom and pan with the chart. Find out more at the Text Series type documentation.

5/ NativeTextAnnotation

A new Annotation type called NativeTextAnnotationhas been created. This provides performance benefits over the normal TextAnnotation which uses SVG. It also supports rotation, multiline, wordwrap and scaling.

These have been added to our annotations demos:

JavaScript Chart Annotations

6/ SubCharts API (Linked Charts, and Charts in Charts)

A new API called the SubCharts API allows you to place multiple charts within a single parent chart. This enables the following new behaviours:

• High Performance Dashboards: hundreds of charts can now share a single WebGL context
• Higher performance linked charts, e.g. the Multi Pane Stock Chart demo now benefits from much faster drawing performance.
• Neat tricks like charts in charts / charts on axis / charts in tooltips (more on that to come)

Here is an example of what’s possible with this exciting & powerful new API:

JavaScript 64-Chart Dashboard Performance Demo

For further info, see the SubCharts Dashboard example above, or see the SubCharts API Documentation.

7/ New Non-Uniform Heatmap chart type

By request, we’ve added a non-uniform heatmap chart type into the SciChart.js library. This allows you to create a heatmap with unevenly sized columns and rows. Colour-mapping is still possible and text labels may be placed in cells. The Non-Uniform heatmap documentation can be found here. A demo can be seen below:

JavaScript Non-Uniform Heatmap Chart

8/ New Heatmap Legend Control

We’ve added a Heatmap Legend control to the scichart.js library. This can be used in both 2D and 3D charts, and displays a colour-map with axis & title at a configurable location in your application. Find a couple of demos below:

JavaScript 3D LiDAR Visualization

JavaScript Heatmap Chart – Spectrogram

9/ Styling & Theming Improvements

New Navy Theme

A new Navy Theme has been added to the SciChart.js library, which looks great on both a light & dark background. This can be seen in all our new examples. Enable the Navy Theme by using our ThemeManager API.

JavaScript Line Chart

Auto Colouring of Series

We’ve updated the colour-palettes on the SciChart themes to include auto series colouring. 

If you set the following code:

const lineSeries = new FastLineRenderableSeries(wasmContext, {
    stroke: "auto",
    strokeThickness: 2
});

SciChart will now pick a suitable colour from a gradient palette on the theme. This results in stunning looking charts from the outset, without having to be a graphic designer to pick colours. 

Vertically Stacked Axes

10/ Performance Improvements

Mostly user-driven, we’ve gone through several sections of the code and made performance improvements. Some nice gains can be seen in this version of SciChart.js, including:

• 10x Faster Performance for Uniform Heatmap updating
• 10x Faster Performance for hundreds of charts scenario by using SubCharts API
• Native text system in axis for faster performance
• NumericAxis Async Labels for faster performance
• Hundreds of micro-optimisations throughout the code
• Multi-pane stock chart performance improvements using SubCharts API

10/ Other Minor Enhancements

A significant number of minor improvements and features have been added to the SciChart.js library in v3. These include:

Demos Created

As well as the new features and their respective demos listed above, we’ve created a number of new demos to showcase the functionality of SciChart.js below:

• Added an Axis Types demo
• Added an Axis Layout feature demo
• Updated our trading demos such as realtime ticking stock charts, candlestick chart, and depth chart
• Created a rich heatmap interactions demo
• Created client/server websocket streaming demo
• Created Oil & Gas Dashboard demo
• Created Generic Animations demo
• Created SubCharts Dashboard Performance demo
• Created a new FastTextRenderableSeries – Text Cloud demo

Bugs vanquished

39 issues in the current release were marked as fixed. These were either reported by users or discovered internally. Bugs vanquished in SciChart.js v3 include:

1. SCJS-1376 Overview Annotation overflowing visiblerange
2. SCJS-1148 Special License for codesandbox.io
3. SCJS-1341 Codesandbox.io frequently throwing errors with scichart
4. SCJS-1321 3D Charts clip when in the same webpage as a 2D chart
5. SCJS-1357 Sync multi chart + Rollover = trying to access a deleted CoordinateCalculator
6. SCJS-1335 MouseWheelZoomModifier does not set SciChartSurface.zoomState to EZoomState.UserZooming
7. SCJS-1333 When Axis has no series, any animate Zoom Extents operation on the axis causes a crash
8. SCJS-1319  AxisBase3D doesnt obey autoTicks = false and manual major/minor deltas
9. SCJS-1318 SurfaceMeshRenderableSeries3D and ScatterRenderableSeries3D Don’t obey opacity
10. SCJS-1347 SciChartOverview not updating when data set after overview creation
11. SCJS-1222 Add missing SciChartSurface properties into the serialization output
12. SCJS-1349 SmartDateLabelProvider values don’t work for a 1-minute chart
13. SCJS-539 SplineLine, Mountain and Band do not support StrokeDashArray
14. SCJS-1306 Theme background is not applied before the initial frame
15. SCJS-1294 Add strokeDashArray to the Spline Line series options
16. SCJS-1295 Selecting annotations at a drag point causes the annotation to shift / resize
17. SCJS-1267 SVG annotation has shifted adorner borders
18. SCJS-1277 When overriding tooltipSvgTemplate, tooltip no longer shifts
19. SCJS-1223 Axis Label Bugs – 0 disappears from chart when old labels are used and you go to the line chart demo and back. 
20. SCJS-1238 drawNaNs Polyline doesn’t handle multiple sequential NaNs
21. SCJS-1092 Heatmap Series Serialization issues – NaNs are serialized as nulls, deserialization fails to handle null values properly
22. SCJS-1240 Pointer Events Capture Issue on Annotations
23. SCJS-1270 Pie chart does not render a single segment
24. SCJS-1212 Investigate rendering performance of heatmap dynamically updated with large size 12000×5000
25. SCJS-1237 Documentation for heatmap is out of date
26. SCJS-1208 Error in HitTest if series without dataSeries is added to a surface with a modifier
27. SCJS-1207 Scientific format shows NaNx10- for 0
28. SCJS-1205 Axis Background Drawing Issue
29. SCJS-1186 ServerSide Licensing fails with CreateSingle
30. SCJS-1189 DateAxis Ticks and labels disappear when zoomed way out
31. SCJS-1187 SeriesSelection errors if any series is invisible
32. SCJS-1180 LineAnnotation grip handle incorrect behavior
33. SCJS-1173 After 2.2.2378 release chart redraw is broken if delete is not being called
34. SCJS-550 Cannot align a VerticalLineAnnotation Top or Bottom
35. SCJS-548 Cannot align a HorizontalLineAnnotation left or right
36. SCJS-1177 Box annotation looks wrong with very thick border
37. SCJS-1161 Need clear license message if trialling a version that is too old
38. SCJS-1172 series.isVisible doesn’t hide pointmarkers
39. SCJS-1163 useWasmFromCDN only configures 2D
40. SCJS-1345 drawNaNAs Polyline not working

Pricing and Licensing

Existing customers with an active support & updates subscription will get the update for FREE.

For new customers or prospects, please contact our sales team and we will be happy to help!

How to get SciChart.js v3.0

Developers – Node/WebPack

Check npm for the latest version.

npm install scichart

Don’t forget to see our Tutorials on setting up Npm projects with Webpack!

Developers – Browser Script

For developers using vanilla JavaScript (no Node Package Manager), you can load SciChart.js directly in browser. Add this script to your Html head and away you go.

// Add this script to head
// Substitute VERSION for the version number you want to include from https://www.npmjs.com/package/scichart
<script src="https://cdn.jsdelivr.net/npm/scichart@VERSION/_wasm/scichart.browser.js" crossorigin="anonymous"></script>


// Now Configure SciChartSurface in code to load the wasm file from CDN
SciChart.SciChartSurface.useWasmFromCDN();

// Now create a SciChartSurface as you would normally!
const { sciChartSurface, wasmContext } = await SciChart.SciChartSurface.create("div-id");

Developers – Getting Started Guides

We’ve collected all the links to help you get started under scichart.com/downloads. Go there and take a look. If you have any questions just ask!

Best regards,

Andrew
[SciChart Team]