Pre loader

SciChart.js v3.0 Released!

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

We’ve completely re-worked the SciChart styles in-line with our new branding. All 85 JavaScript Chart examples have been updated to look better, demonstrate features and give you a kick-start when creating new projects. The new-look examples are simply stunning, and give you a glimpse of what is possible with SciChart.js.

The new homepage for the SciChart.js examples is now on the main website. The react demo is still live and source code can be downloaded for the entire SciChart demo. See more at the resources below:

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. 

Test CaseLib Load (ms)First Frame (ms)Append Data (ms)FPS
1,000 Labels581234059.18
2,000 Labels152260.02
5,000 Labels064134.12
10,000 Labels057117.14
20,000 Labels161178.79
50,000 Labels172713.62
100,000 Labels146241.85

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:

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]

By Andrew Burnett-Thompson | Jan 15, 2023
CEO / Founder of SciChart. Masters (MEng) and PhD in Electronics & Signal Processing.Follow me on LinkedIn for more SciChart content, or twitter at @drandrewbt.

Leave a Reply

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies