SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

Hey everyone!

It’s my great pleasure to announce today we are releasing SciChart.js version 2.0-Beta. This version is a HUGE upgrade to our already powerful & feature rich JavaScript chart library, which we’ve worked hard on for the past 6 months or so this year.

We’ve compiled a “What’s New” list below. Take a look through, and then we recommend you try it out for yourselves. SciChart.js version 2 brings a host of new features and improvements to the library and is a massive upgrade for users of our WebGL / WebAssembly powered JavaScript & Typescript charts.

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

Where do we start? Let’s go through the features one by one:

1. 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.

2. 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.

3. 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.

4. 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.

5. 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 where a single chart has mutiple traces with it’s own Y-Axis, but the traces are stacked one on top of each other.

Perfect for EEG / ECG like charts where you want to display several overlapping traces on a single SciChartSurface.

6. Axis Label Customisation

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.

7. Builder API

A brand new API in SciChart.js – the Builder API – allows you to construct charts with a JavaScript object definition.

API code like this allows you to create charts, set series, data, axis types, even interactivity modifiers.

// Using the Builder API to construct a chart with X,Y axis, line series, light theme and zoom pan modifier
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 }
     ]
 });

The Builder API is a layer built on top of SciChart.js programmatic API. It’ll be a lot more familiar for JavaScript developers and will allow some neat tricks, such as specifying and re-using chart definitions which will make React / Vue / Angular, or client-server apps easier to build with SciChart.js.

8. JSON Deserialization / Serialization API

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.

9. Point Metadata API

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.

Data can now be in the format X, Y, {Object} which allows you to store additional metadata on x-y data points. Metadata can then be routed through to Tooltips, Hit-Test or PaletteProvider.

For example, if you click or hover a point you can get this metadata object back which allows you to do more complex interactions with the chart when linked to external datasets.

10. 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.

11. Style and Data Animations

As well as start-up 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, stroke thickness, fill) as well as entire datasets.

For example, animate one entire dataset (x,y values) to another. You can animate the stroke colour, line thickness or fill colours of a series. You can even animate the point marker being displayed.

Use this API to create stunning JavaScript charts

12. Transparent, Image or Blurred/Glass 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!

13. Loader animation 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.

14. SciChartOverview Scrollbar Control

After requests from our userbase, we’ve added the SciChartOverview control to SciChart.js v2.x.

The SciChartOverview 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.

15. Retina / High DPI Display / Browser Zoom Support

SciChart.js v2.x now supports sharp graphics on high DPI / 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 line thickness 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.

16. 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.

17. 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.

18. 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!

Breaking Changes

They say you can’t make an omelette without breaking some eggs. In order to bring you this major upgrade to SciChart.js v2.x we’ve had to introduce some small breaking changes to the API.

As a result, SciChart.js v2.x is not fully backward compatible to SciChart.js v1, however we’ve tried to keep disruption and changes to the bare minimum. Most apps will Just Work with SciChart.js version 2.

We’ve published a full list of breaking changes to our Documentation Here.

Click to read all Breaking Changes in SciChart.js v2.x.

Pricing Plan Changes

To reflect the huge value in in this upgrade to SciChart.js, we’ve made a small change to our pricing & licensing. New Pricing for SciChart.js can be found below. This will be effective upon launch of the new version:

  • SciChart.js 2D Charts: Was $999, Now $1,299
  • SciChart.js 3D Charts: No Change
  • Bundle 2D / Bundle SDK / Bundle Enterprise: No Change

Existing customers with an active support & updates subscription will get the update for FREE. We are also able to provide 1, 2 and 3-year subscription renewals if you would like to lock in pricing for longer term projects.

Where to get it

We’re in the process of packaging SciChart.js v2 for release now, but in the meantime you can get it straight from npmjs by using this script:

npm install scichart@2.0.0-beta.2084

And Finally

… That was a huge piece of work and special thanks go to our JavaScript / WebAssembly / WebGL team for making this massive improvement to SciChart.js.

Finally we also want to thank our customers who have supported us since SciChart.js v1 was released and we hope to see more and more of you use our awesome JavaScript Charts SDK in the future!

Best regards,
Andrew
[SciChart Team]

Comments are closed.