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:
Complete re-work of the SciChart Brand, Examples and Style
New Native Text Rendering Engine
RenderableSeries DataLabels (text labels)
FastTextRenderableSeries
NativeTextAnnotation
New SubCharts API (Charts in charts)
New Non-Uniform heatmap series
HeatmapLegend control
Styling and Themeing improvements
Performance improvements
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:
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 Case
Lib Load (ms)
First Frame (ms)
Append Data (ms)
FPS
1,000 Labels
58
123
40
59.18
2,000 Labels
1
5
22
60.02
5,000 Labels
0
6
41
34.12
10,000 Labels
0
5
71
17.14
20,000 Labels
1
6
117
8.79
50,000 Labels
1
7
271
3.62
100,000 Labels
1
4
624
1.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 }
)
}));
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);
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.
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:
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:
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.
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.
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:
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:
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!
CEO / Founder of SciChart.
Masters (MEng) and PhD in Electronics & Signal Processing.Follow me on LinkedIn for more SciChart content, or twitter at @drandrewbt.
Queens Award for Innovation Proud winners of the Queens Award for Innovation, 2019. Awarded on account of our innovative graphics engine which underpins the SciChart library and enables our world-beating charting performance
National Business Awards Highly Commended for Lloyds National Business Awards, 2019. Awarded on account of our innovative graphics engine and impressive customer base
Reviews SciChart has received hundreds of verified, 3rd party reviews
Try SciChart Today
Start a trial and discover why we are the choice of demanding developers worldwide