SciChart.js v2 BETA Released!

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 and 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 trying it out yourself. 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 and 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.

🔗See the SeriesSelectionModifier Example
🔗See the SeriesSelectionModifier Docs

2. DataPoint Selection

We’ve also added Datapoint Selection into SciChart.js v2.x. You can now select individual data points, drag to select multiple data points, get notified on click and display visual feedback. To use this feature, add a DataPointSelectionModifier to your chart.

🔗See the DataPointSelectionModifier Example
🔗See the DataPointSelectionModifier Docs

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

🔗See the Logarithmic Axis Example
🔗See the Logarithmic Axis Docs

4. Central / Inner Axis

We’ve added further customizations 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. Importantly, the placement of the axis is fully customizable.

🔗See the Central Axis Example
🔗See the Inner / Central Axis Docs

5. Vertically Stacked Axis

Another axis customization we’ve added is the Vertically Stacked Axis which allows you to change the layout of axis panels.

Instead of left to right for Y-Axis, you can now layout several axes top to bottom. This gives you layout options like this where a single chart has mutiple traces with its own Y-Axis, but the traces are stacked one on top of each other.

It’s perfect for EEG / ECG charts where you want to display several overlapping traces on a single SciChartSurface.

🔗See the Vertically Stacked Axis Example
🔗See the Vertically Stacked Axis Docs

6. Axis Label Customization

There are now several ways to customize 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.

🔗See the Axis Label Customisation Examples
🔗See the Axis Label Customisation Docs

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, and 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 the 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.

🔗See the Builder API Examples
🔗See the Builder API Docs

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.

🔗See the JSON Serialization Examples
🔗See the JSON Serialization Docs

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 data points 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.

🔗See the Point Metadata Example
🔗See the Point Metadata Docs

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 want to add any other kind of behavior.

🔗See the Filters API Examples
🔗See the Filters API Docs

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 lets you animate style properties on series (stroke, stroke thickness, fill) as well as entire datasets.

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

Use this API to create stunning JavaScript charts.

🔗See the Style Animations Example
🔗See the Data Animations Example
🔗See the Style Animations Docs
🔗See the Data Animations Docs

12. Transparent, Image or Blurred/Glass Backgrounds

In SciChart.js v2.x, we’ve completely rewritten 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 and theming API!

🔗See the Image Background Example
🔗See the Transparent / Image and Blurred Backgrounds Docs

13. Loader Animation Customization

More styling and 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 and background colors, right through to customizing the DOM which is displayed as the chart loads for the first time.

🔗See the Waitloader Styling Docs

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.

Working on vertical or horizontal charts, you can customize what series are displayed behind the overview, and customize the look and feel of the scroll grips and selection rectangle too.

🔗See the SciChartOverview Example
🔗See the SciChartOverview Docs

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 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 and shapes now look sharper and clearer on higher DPI displays or when the 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.

🔗See the Retina / High DPI / Browser Zoom Docs

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

🔗See the TextLabelProvider Docs

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 behaviors and more.

🔗See the Hit-Test API Example
🔗See the Hit-Test API Docs

18. Miscellaneous Improvements

We’ve made lots of improvements to SciChart.js, including:

• Overall reliability
• Helpful error messages in the JavaScript console
• Usability of APIs
• 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 work with SciChart.js version 2.

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

• Formatting Enums
• SciChartSurface.create
• SciChartPieSurface.create
• Label Formatting
• IThemeProvider additional fields
• UniformHeatmapDataSeries constructor
• Shader effects
• Hit-Test
• RolloverModifier
• CursorModifier
• Ignore fs should be removed or updated in webpack.config
• TGridLineStyle.strokeDasharray renamed
• TEasing renamed
• ICandlestickSeriesOptions renamed
• RubberBandSvgRect renamed

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

Pricing Plan Changes

To reflect the huge value in this upgrade to SciChart.js, we’ve made a small change to our pricing and licensing. New pricing for SciChart.js can be found below. This will be effective upon the 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 and 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 long-term projects.

Where to Get SciChart.js v2?

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 Burnett-Thompson
Founder & CEO of SciChart