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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
Lines, strokes, shapes now look sharper and clearer on higher DPI displays or when browser is zoomed
Text is rendered at a higher resolution. Text scales with browser zoom (good for Accessibility)
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.
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.
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.
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.
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:
… 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!
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
We use cookies to give you the best experience on our website. Cookies are files stored in your browser and are used by most websites to help personalise your web experience. By continuing to use our website, you are agreeing to our use of cookies.
