RSS Feed
News
Apr
24
Posted by Andrew Burnett-Thompson on 24 April 2023 11:01 PM

It’s only been two months since our last major release, but we have another one queued up for SciChart.js! Today we are pleased to announce SciChart.js v3.1.333 has been released. Find out what’s new in the release note below. This release is a drop-in replacement and is backward compatible to users of SciChart.js version 3. Users of SciChart.js v2 may find minor breaking changes or changes in behaviour. We suggest upgrading & testing, giving us your feedback before major production releases.

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

Version 3.1 at a glance:
  1. “Just Works” support – no license required – for sandbox sites including Codepen.io, jsfiddle.net, codesandbox.io
  2. Added global exports for npm, index.min.js and simplified namespaces (imports)
  3. Updated 60+ documentation pages to include Builder API samples and codepen embeds
  4. Updated all demos in demo.scichart.com to include contextual documentation and codesandbox links
  5. Added a ChartTitle property to SciChartSurface
  6. CustomChartModifier, CustomChartModifier3D type to allow custom modifiers in vanilla JS applications
  7. Performance Optimisations
  8. Bugs fixed & minor improvements

1/ “Just Works” (no license required) for sandbox sites

Earlier this year we blogged that many sandbox environments have been enabled for SciChart.js including Codepen.io, Codesandbox.io and JSFiddle.net. These allow you to try out or use SciChart.js in browser, share examples, bug reports, ideas, feedback and more. No license is required for the sandbox environments and SciChart.js “Just Works” with a watermark. This is a step toward Community licensing which we are also working on.

For more info check the following blog post:

Codepen, Codesandbox and JSFiddle support in SciChart.js

2/ Added global exports for npm, index.min.js

We’ve also added global exports for npm and an index.min.js for JS delivr CDN. That means two things.

  1. All namespaces/imports are now just import { all, the, types } from “scichart”, for example:
    // New syntax from 3.1 or later!
    // import { all, the, things } from "scichart"
    import {
      SciChartSurface,
      NumericAxis,
      FastLineRenderableSeries,
      XyDataSeries
    } from "scichart";
  2. When including SciChart.js from CDN you just need to add a script reference to
    <script src="https://cdn.jsdelivr.net/npm/scichart/index.min.js"></script>
    and import your types like this
    // Syntax for importing types when using vanilla JS, no npm
    const { 
      SciChartSurface,
      NumericAxis,
      FastLineRenderableSeries,
      XyDataSeries 
    } = SciChart;

Thus the imports are unified between npm and non-npm applications and greatly simplified. No more worrying about what the import is or searching the documentation to find an import path.

3/ Updated 60+ documentation pages to include Builder API and codepen embeds

So now we’ve done that, we can embed codepen and live examples straight into the documentation. There are over 200 hand-written documentation pages for SciChart.js, 80 JavaScript chart examples and thousands of auto-generated TypeDoc pages showing how to use our library. 

We’ve started working through these and updated around 60 out of 200 of the documentation pages to have better example code, re-checked the example code and ensured each contains a JavaScript example plus a builder-API example. You’ll now see a Builder API example alongside a JavaScript example in all the pages under 2D Chart Types and Axis APIs. More to come! Plus, a codepen embedded example which you can edit in browser.

A picture (or a codesample) paints a thousand words!

Check out some examples of the new and updated documentation pages below:

We plan to continue working through our documentation and adding more codepen embeds and updating examples & tutorials in future, providing a better experience for developers.

4/ Updated all demos to include contextual documentation and codesandbox links

If you head over to demo.scichart.com and click on any SciChart.js demo, you’ll now see a new toolbar at the top of the page.

  • Click on the Docs button to view contextual documentation for this demo.
  • Click on the Github button to view contextual source-code for this demo.
  • Click on the Code Sandbox button to see some real magic. This extracts the specific source-code for this example into a stand-alone codesandbox.io project.

The same toolbar can be seen here when viewing the example from our website, e.g. from scichart.com/example/javascript-chart/javascript-chart-logarithmic-axis

5/ Added a ChartTitle property to SciChartSurface

Many of our examples at demo.scichart.com used Annotations to create a pseudo chart title. In SciChart.js v3.1 we’ve added a chart title property. All the demos have been updated to reflect this. 

There is a specific Chart Title demo which you can find below. 

JavaScript with Configurable Chart Titles

Also documentation has been updated to show you how to customise a chart title. 

6/ CustomChartModifier, CustomChartModifier3D type

A quick & Simple change, we’ve added a type CustomChartModifier2D and CustomChartModifier3D so you can create custom modifiers in codepen, or when using the index.min.js (not npm). The reason for this is ChartModifierBase type is abstract, and cannot be instantiated in vanilla javascript. Here’s a demo, showing how to create a custom ChartModifier which detects if mouse over the axis.

See the Pen Support: Detect if over axis or chart on mouse hover using SciChart.js by SciChart.js Official (@scichart) on CodePen.

7/ Performance Optimisations

Almost 100% Performance improvement for Big-Data Charting

Big Data Performance has been improved yet again by optimising two things:

In SciChart.js v3 Data Appending was a performance hotspot. This has been addressed in version 3.1.333
In SciChart.js v3 Data Appending was a performance hotspot. This has been addressed in version 3.1.333

We had some overly aggressive sanity checks in SciChart.js. Before, when appending data we were checking every single element of the array to check it was numeric! Now, we make the assumption that if you’re passing an array of numbers to dataSeries.appendRange() SciChart.js will sanity check the first element, but then assume all subsequent elements of the array are numbers. So don’t go passing an array of [1, 2, 3, “Apples”, “Bananas”] as that won’t work


Comments (0)

CONTACT US

Not sure where to start? Contact us, we are happy to help!


CONTACT US

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725