SciChart.js v5.2 and Financial Drawing Tools Released!

Continuing our rapid release cadence of new features every ~8 weeks, today we have an announcement to make.

SciChart.js v5.2 is released, plus we’ve released a brand new package scichart-financial-tools to level up your trading applications in JavaScript.

Find out what’s new below!

1. SciChart Financial Drawing Tools for Trading Apps

We’ve released a new package specifically focussed on financial drawing tools in trading apps. You can get this via NPM. The license type is the same as the license for SciChart.js itself (all SciChart.js customers can use it)

npm install scichart scichart-financial-tools

• SciChart Financial Tools Demo
• SciChart Financial Tools Documentation

What’s in the scichart-financial-tools Package?

We have added various trading annotations:

• ChannelAnnotation – renders a parallel channel which can be manipulated via mouse/touch (docs)
• DisjointChannelAnnotation – a variation of ChannelAnnotation (docs)
• FlatBottomChannelAnnotation – another variation with flat bottom (docs)
• ExtendedLineAnnotation – two point trend line (docs)
• FibonacciRetracementAnnotation – draws Fibonacci retracement levels from three editable points (docs).
• FibonacciCirclesAnnotation – draws Fibonacci support/resistance lines as a circle
• FibonacciSpeedResistanceArcsAnnotation– draws Fibonacci support/resistance lines as an arc
• FibonacciWedgeAnnotation– draws Fibonacci support/resistance lines as a wedge
• MeasureAnnotation – measures the change between two points. It renders a rectangle, horizontal and vertical arrows and a dedicated measurement label (docs)
• PitchforkAnnotation – draws Andrews’ Pitchfork from three points: handle, shoulder A and shoulder B (docs)
• PitchfanAnnotation – uses the same pitchfork points and draws projected fan rays (docs)
• StopLossTakeProfitAnnotation – draws a stop-loss or take-profit zone from two points (docs)

Interactive Placement, Editing of Annotations & Financial Drawing Tools

All of the financial drawing tools we’ve added can be programmatically placed via the API, or click-placed via a user.

To do this, we’ve added MultiPointAnnotationPlacementModifier which allows for placing different annotation types on the chart easily and FreehandDrawingModifier provides drawing functionality.

• MultiPointAnnotationPlacementModifier — interactively place financial annotations on a chart (docs)
• FreehandDrawingModifier – Freehand drawing allows for drawing arbitrary shapes on charts (docs)

Added Renko Charts, Heikin Ashi Charts via Data Filters

SciChart already features a rich Data Filters API, allowing you to perform functions, filters or transforms on data. We’ve extended this to provide Heikin Ashi charts, Renko charts and Point & Figure charts in SciChart.js:

• OhlcHeikinAshiFilter – converts an OhlcDataSeries into Heikin-Ashi candles. You will find documentation and demo here.
• OhlcRenkoFilter – converts an OhlcDataSeries into Renko bricks represented as OHLC values. You will find documentation and demo here.
• PointAndFigureFilter– converts OHLC close values into Point & Figure marks. You will find documentation and demo here.

2. New Features

Composite annotations

A powerful feature that has been ported from SciChart WPF to SciChart.js: CompositeAnnotation allows you to create an annotation group, for complex multi-figure annotations.

All of the financial drawing tool annotations: Fibonacci Retracements, Channels, Measure Annotations, have been built using CompositeAnnotation. Now you can create your own annotation groups by grouping two or more Annotations into a master canvas, with a multiple touch interaction points for manipulating them.

You will find documentation and demo here.

Smith Chart Demo

Smith Charts are complex radial charts used by RF and microwave engineers to visualise impedance mismatches. We’ve bult a powerful Smith Chart demo leveraging the extensive API endpoints of SciChart.js to show just how customisable SciChart is, plus, provide a fully featured demo for users on how to create a Smith Chart in their apps.

We will be publishing a companion blog post on Smith Chart shortly, explaining all the API overrides and extensions that are available.

In the meantime, you can find a demo here.

Force Direction Graph Demo

Force direction graphs, or node diagrams, allow you to visualise connections between nodes in a graph network. In this demo, we’ve added a React Force Directed Graph using SciChart.js, visualising US airport flight routes with a physics-based force simulation (demo).

Arbitrary Contour Chart Levels

UniformContoursRenderableSeries now has a zLevels property which specify exactly at what levels to draw contour lines. On the image above we use 1000, 5000 and 8000 levels. Find documentation here.

Pinch Zoom support for X and YAxisDragModifier

XAxisDragModifier and YAxisDragModifier now have built-in support for pinch / touch behaviour on the axis.

3D Charts now have Series Selection Modifier

We have implemented SeriesSelectionModifier for 3D charts (docs).

Above, you can see a modified version of our Waterfall Chart demo which replaces the top chart from a 2D chart to a 3D chart, with series selection and interactions being driven from the 3D chart. We will be publishing this update to our demo suite soon.

3. New Server Side Licensing

SciChart.js v5.2 introduces Simple Server Validation — a new Advanced Licensing option designed to make server-side license validation as painless as possible.

Unlike our existing Native Server (OEM) deployment, Simple Server Validation requires no native DLL, no FFI bridge, and no challenge/response handshake. Your server simply computes an HMAC-SHA256 token from a shared Server Secret and returns it to SciChart.js, which verifies it in WASM and caches the result for 7 days. That means a single endpoint, a few lines of code, and you’re done.

Why you’ll like it

• Drop-in integration — typically under 20 lines of server code in any language that supports HMAC-SHA256.
• No native dependencies — pure managed code on the server side; nothing to install, nothing to patch.
• Works anywhere — Node.js, .NET (Minimal API and MVC), Spring Boot, Python, Go, Ruby, PHP, Rust.
• Desktop apps too — Electron and Tauri can compute the token in the privileged process and pass it to the renderer over IPC, keeping the secret out of the bundle.
• Low overhead — each browser only needs to hit your endpoint once per week, with automatic background re-validation every 24 hours.

Simple Server Validation is ideal for OEM scenarios where you need to deploy SciChart.js to unknown or user-controlled domains, or for desktop apps built on Electron or Tauri.

Get started

1. Full documentation, including step-by-step implementation guides for every supported stack: Simple Server Validation — SciChart.js Docs
2. Runnable example projects for Node.js, ASP.NET Core (Minimal API and MVC), Spring Boot, Electron, and Tauri are on GitHub: SciChart.JS.Examples — AdvancedLicensing
3. Simple Server Validation requires a license with the SV (Simple Validation) feature flag. If you’d like this enabled on your order, please contact technical sales or submit a support request.

4. Imrovements and Bug Fixes

• Arc annotations rendering has been improved by anti-aliasing. This massively improves the visual quality of Polar Charts, Smith Charts as well as Radial/Arc Annotations.
• SCJS-2422 Native Text Shared Cache bug when using multiple SciChartSurfaces and custom font
• SCJS-2406 Problems with text measure and label cache
• SCJS-2397  Line Rendering Freeze
• SCJS-2405 Updating metadata on 3d does not invalidate

5. Documentation updates

The following chart types are available in SciChart.js demos but not yet covered in the chart types documentation. We have fixed this. Find updated documentation here.

• Linear Gauges
• Choropleth Maps
• Heatmap over Map
• Multi Map
• Vector Field Plots
• Gantt Charts
• Histogram Charts
• Polar Maps
• Waterfall Charts
• Interactive Waterfall (Spectral) Chart
• 3D Waterfall / Point-Line Chart

5. Breaking Changes

Link to Breaking Changes Doc

• ArcAnnotation and PolarArcAnnotation strokeThickness is now treated correctly, which resulted in lines twice as thick, you may want reducing strokeThickness by half.
• DataPointSelectionModifier selectManyPoints() and selectSinglePoint() returns boolean instead of void. It will affect only TypeScript users who are extending the class.
• New enum item EAnnotationType.CompositeAnnotation. It might affect TypeScript users having switch/case conditions with all annotation type check.

Contact us to learn more

SciChart.js is a JavaScript Chart Library designed for complex, mission critical applications. Now with a FREE community edition. If you have a question or would like to learn more about our products & services, please contact us:

CONTACT USGET SCICHART.JS FREE