SciChart WPF v8.6 Released!
We’ve moved over to a new format for communicating our releases and updates of our popular WPF Charts library, by publishing […]
12th September, 2024
We’ve moved over to a new format for communicating our releases and updates of our high performance JavaScript Charts library, by publishing a rolling changelog of every fix or enhancement in SciChart. You can find the changelogs in the top menu at Developers -> Changelogs -> SciChart JS ChangeLog
What’s New in v3.4 of SciChart’s JS Charts?
Today we have finalised the release of v3.4.662 of SciChart.js. This is a cumulative update which contains very important fixes and features since our last announced release, version 3.3.
Changes since version 3.3
There are a HUGE number of changes in this release. Find them detailed below with links to documentation, examples and more.
New Features
- Hoverable Annotations
- DataLabels support for Stacked Column Series
- Smooth Stacked Mountain Series
- Alternative line smoothing
- Animations improvements
- Engineering Formatting for Axis
- Disable Loader animations
- CursorModifier support for Non-Uniform Heatmap and Contour Series
- Helper method for creating paletteProviders that depend on y value
- SVG Annotations can now be placed behind the chart
- SS.ms format and use of this in SmartDateLabelProvider
- createSuspended and nextStateRender for visual testing an export improvements
- Gradient fill for band series
- Sync Vertical Chart Axis sizes with SciChartHorizontalGroup
- Sensible Column widths for Columns, Error Bars, Candles using dataPointWidthMode
- ColumnSeries can draw different styles in the same series
- Improvements to Splitting Line Charts by Thresholds
- Added MemoryTests project to Github to allow testing & debugging memory related issues
- New React / JavaScript Chart Demos
- Improvements to Documentation, Examples
- Bug fixes, improvements
1. Hoverable Annotations with Tooltips
Annotations now have an onHover callback which is enabled by adding an AnnotationHoverModifier to the sciChartSurface.chartModifiers collection. The modifier controls which annotations are checked for hovering, and also allow you to specify general onHover behaviour in one place. This feature now allows you to easily add configurable tooltips to annotations in a JavaScript or React chart.
Here’s a quick sample how to add an onHover callback to a single annotation:
const boxAnnotation = new BoxAnnotation({
xCoordinateMode: ECoordinateMode.Relative,
yCoordinateMode: ECoordinateMode.Relative,
fill: "#3d34eb",
strokeThickness: 1,
x1: 0.1,
x2: 0.4,
y1: 0.4,
y2: 0.6,
onHover: (args) => {
const { sender, mouseArgs, isHovered } = args;
if (mouseArgs && isHovered) {
const relativeCoordinates = args.getRelativeCoordinates();
console.log("The annotation is hovered at", relativeCoordinates);
}
},
});This requires the AnnotationHoverModifier to be added to the chart, which also has a onHover callback:
// Add AnnotationHoverModifier to enable hover behaviour
const annotationHoverModifier = new AnnotationHoverModifier({
enableHover: true,
targets: [boxAnnotation],
hoverMode: EHoverMode.AbsoluteTopmost,
notifyOutEvent: true,
notifyPositionUpdate: true,
onHover: (args) => {
const hoveredAnnotations = args.hoveredEntities;
const unhoveredAnnotations = args.unhoveredEntities;
hoveredAnnotations.forEach((annotation) => {
annotation.fill = "#34eb8c";
annotation.strokeThickness = 3;
});
unhoveredAnnotations.forEach((annotation) => {
annotation.fill = "#3d34eb";
annotation.strokeThickness = 1;
});
},
});
sciChartSurface.chartModifiers.add(annotationHoverModifier);Official documentation for the AnnotationHoverModifier can be found here. Typedoc API docs can be found here.
2. DataLabels support for Stacked Column Series
We’ve added DataLabels support to stacked column series, allowing you to put labels inside, outside, above or below columns.
To enable dataLabels on a StackedColumnRenderableSeries set the fontFamily and fontSize on the dataLabels options as normal. Additional properties to configure the label position can be found in EColumnDataLabelPosition enum.
const dataLabels = {
color: "#FFfFFF",
style: { fontSize: 12, fontFamily: "Arial", padding: new Thickness(0, 0, 2, 0) },
precision: 0,
positionMode: EColumnDataLabelPosition.Outside,
verticalTextPosition: EVerticalTextPosition.Center,
};
// Create some RenderableSeries - for each part of the stacked column
// Notice the stackedGroupId. This defines if series are stacked (same), or grouped side by side (different)
const rendSeries1 = new StackedColumnRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "EU" }),
fill: appTheme.VividPurple,
stroke: appTheme.PaleSkyBlue,
opacity: 0.8,
stackedGroupId: "StackedGroupId",
dataLabels,
});You can read more about the DataLabels API Documentation here. The StackedColumnRenderableSeries documentation can be found here.
3. Smoothed Stacked Mountain Series
A new chart type has been added to SciChart.js – a Smoothed Stacked Mountain chart. This has an adjusted bezier line smoothing algorithm that works with stacked, and 100% stacked mountain series.
Find a demo of the new chart type and how to use it below.
Official documentation for the new Bezier (Smoothed) Stacked Mountain Series can be found here.
4. Alternative Line Smoothing
Bezier line smoothing has been added to SciChart.js, which can be applied to line, band and mountain series. Further demos of this can be found below:
The JavaScript / React Spline Line chart shows how to add custom Bezier smoothing to a line chart in SciChart.js. In the example above, drag the axis marker to change the smoothing coefficient and see the impact on the final rendered output.
The output is controlled by a BezierRenderDataTransform. This is based on the new RenderDataTransforms API in SciChart.js v3.3, which allows you to modify the final rendered output data immediately before draw.
const bezierDataSeries = new XyDataSeries(wasmContext, {
dataSeriesName: "Bezier (Range Restricted)",
xValues,
yValues,
});
const bezierSeries = new FastLineRenderableSeries(wasmContext, {
stroke: appTheme.VividPurple,
strokeThickness: 4,
dataSeries: bezierDataSeries,
pointMarker: new EllipsePointMarker(wasmContext, {
width: 11,
height: 11,
fill: appTheme.ForegroundColor,
stroke: appTheme.VividSkyBlue,
}),
animation: new WaveAnimation({ zeroLine: 10, pointDurationFraction: 0.5, duration: 1000, fadeEffect: true }),
});
const bezierTransform = new BezierRenderDataTransform(bezierSeries, wasmContext, [
bezierSeries.drawingProviders[0],
]);
bezierSeries.renderDataTransform = bezierTransform;
sciChartSurface.renderableSeries.add(bezierSeries);Another example which has been updated to use the BezierRenderDataTransform is the Spline Band Chart. Check out both examples to see how to use this new feature in SciChart.js.
5. Animations Improvements
Startup animations (see documentation) now have a flag reversible: true and an onComplete callback. This allows you to create more complex and composite animations on chart series using SciChart.js.
See the Pen SciChart.js documentation snippet for Animations – AnimateInOut by SciChart.js Official (@scichart) on CodePen.
Official documentation for the Animations API can be found here.
6. Engineering Format for Axis
We’ve added a new ENumericFormat value of ENumericFormat.Engineering. When enabled, this displays axis labels and data labels in the format 1K, 1M, 1B as opposed to 1,000 1,000,000 and 1,000,000.
A further property has been added to customize the prefix on LabelProvider.engineeringPrefix
Gets or sets the engineering prefixes to use when formatting values to text.
Default - ['K','M','B,'T'] for "large" prefixes, ['m','u','n','p'] for small prefixes.
Only works when ENumericFormat.Engineering is selected This is demonstrated in the Population Pyramid example which makes use of the concise compact labels provided by Engineering formatting.
AxisLabels ENumericFormats have been documented here, showing the new ENumericFormat.Engineering mode in action.
7. Disable Loader Animations
We’ve updated the parameters passed to sciChartSurface.create to allow you to entirely disable a loader animation when the chart starts.
Simply pass loader: false to turn the loader off for this SciChartSurface
SciChartSurface.create({ loader: false });Documentation on how to style, theme or disable the wait-loader can be found here.
8. CursorModifier support for Non-Uniform Heatmap and Contour Series
We’ve added support for the CursorModifier to the NonUniformHeatmapRenderableSeries
In addition, the UniformContoursRenderableSeries is now compatible with the CursorModifier.
Documentation on the CursorModifier can be found here, and Non-Uniform heatmap series can be found here.
9. Helper method for creating PaletteProviders dependent on y-Value
We’ve added helper function PaletteFactory.createYGradient which allows you to create a PaletteProvider that colours data-points in chart series depending on Y-value.
We’ve updated the Line Chart example to use the createYGradient function in the centre panel. We’ve also added new documentation for the PaletteFactory helper class here.
To use the PaletteFactory.createYGradient function, use the following code.
const yGradientPalette = PaletteFactory.createYGradient(
wasmContext,
new GradientParams(new Point(0, 0), new Point(0, 1), [
{ offset: 0, color: "#3333FF" },
{ offset: 0.5, color: "#33FFAA" },
{ offset: 1, color: "#FF6600" },
]),
// the range of y-values to apply the gradient to
new NumberRange(0, 1.5),
// Optional parameters to control which elements of the palette are enabled
{
enableFill: false, // Applies to fills on mountain, column
enableStroke: true, // Applies to stroke on all series
enablePointMarkers: true, // Applies to pointmarkers if present
strokeOpacity: 1.0,
pointMarkerOpacity: 0.7,
fillOpacity: 0.0,
}
);
sciChartSurface.renderableSeries.add(
new FastLineRenderableSeries(wasmContext, {
strokeThickness: 5,
dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
pointMarker: new EllipsePointMarker(wasmContext, { width: 20, height: 20, strokeThickness: 0 }),
paletteProvider: yGradientPalette,
})
);This results in the following output:
10. SVG Annotations can now be placed behind the chart
SciChart.js features two types of Annotations: RenderContext annotations which use WebGL to draw, and SVG based Annotations.
Until now, SVG annotations could only be placed over the chart, but we’ve now added support to place SVG Annotations below the chart, allowing you to place images, text watermarks or custom shapes/SVG behind the chart series and gridlines.
You can see the modes of placement of annotations in the following demo.
Documentation for the Annotations API can be found here
11. SS.mm format and use of this in SmartDateLabelProvider
The SmartDateLabelProvider type has been updated to include SS.mm format automatically, so that when deep zooming a chart with a DateTimeNumericAxis you will automatically now see seconds and milliseconds on the chart axis.
Documentation for the DateTimeNumericAxis can be found here. When this axis type is used, the SmartDateLabelProvider is automatically activated.
12. createSuspended and nextStateRender for visual testing and export improvements
When exporting a chart to an image for visual testing, or for chart export, we’ve added two new functions to allow a SciChartSurface to be created in a suspended state and to force a single render.
- createSuspended: Defines if newly created charts should be rendered as soon as possible after initialization. Setting to true will require surfaces to be “resumed” in order to perform actual rendering.
- nextStateRender: Creates a promise which resolves when the chart is updated to the next fully rendered state.
These allow you to control the rendering state and are used in the server-side-chart-export example in our Github repository.
13. Gradient fill for Band Series
The Band Series, a type of chart series which displays a polygon fill between upper & lower lines, now supports gradient fills and not just solid colours. This is demonstrated in the React/JavaScript Band Chart Example below.
Updated documentation for the Band Series showing how to apply gradient fills can be found here.
14. Sync Vertical Chart Axis sizes with SciChartHorizontalGroup
Charts can be synchronized in SciChart.js so that zooming, panning and tooltips/cursors act across multiple chart surfaces.
In SciChart.js v3.4 we’ve enabled this chart synchronization in vertical (rotated) charts by use of a new SciChartHorizontalGroup type.
Documentation has also been written for synchronizing vertical and horizontal charts and several examples can be found in the links below:
Documentation for Synchronizing Multiple Charts can be found here.
New Documentation for Synchronizing Vertical Charts can also be found here.
15. Sensible Column widths for Columns, Error Bars, Candles using dataPointWidthMode
We’ve added a new property to Column, ErrorBars, Candlestick and OHLC series called dataPointWidthMode.
This allows you to space columns and bars according to pixels, relative values or data-values. This improves the scenario where column series with sparse datasets would overlap.
Find a demo below in the documentation:
Documentation for dataPointWidthMode and a live codepen demo can be found here.
16. ColumnSeries can draw different styles in the same series
We’ve added a new example showing how you can use the RenderDataTransforms API to inject multiple styles into a single series. This is different from the PaletteProvider API that allows you to override colours of columns, line segments and pointmarkers but only supports solid colours. The RenderDataTransforms API allows you to insert, modify or remove data-points immediately before draw, or inject full styles such as changing point-marker mid-series, or changing gradient fill colour mid-series. Find an example of this powerful API below:
The RenderDataTransforms documentation can be seen here. The Multi Series Style demo which uses this technique to inject styles into a column series can be found here.
17. Improvements to Splitting Line Charts by Thresholds
Using the PaletteProvider you can colour line segments depending on a Y-value, allowing you to create thresholded series. However this technique suffers from a limitation, whereby the entire segment is coloured. For example, line series coloured by paletteprovider with a Y-threshold can look like this.
The RenderDataTransforms API allows you to insert, remove or modify extra data-points in a series immediately before draw. This API can be used to create perfect thresholded series by inserted the extra data-point which bisects the threshold line.
We’ve created an example showing how to do this:
The RenderDataTransforms documentation can be seen here. The PaletteProvider API documentation can be found here.
18. Added MemoryTests project to Github to allow testing & debugging memory related issues
In previous releases of SciChart.js, we published memory leak debugging tools to allow you to detect and eliminate memory leaks in your JavaScript charting applications.
In this release, we’ve added a set of Memory Test examples, to help you to debug issues in your application. The purpose of these is to give you some working examples that are tested to show best practices to ensure no leaking of memory when creating/initializing charts, when dynamically updating data, or when updated dataseries in FIFO mode.
For more information, see the readme at MemoryTests over at Github
19. New React / JavaScript Demos & Examples
We’ve released almost 100 new examples of how to use SciChart.js with scichart-react, our open source
- Population Pyramid: Population Pyramid of Europe and Africa using SciChart.js High Performance JavaScript Charts. This also demonstrates the use of DataLabelLayoutManager to Modify the positions of data labels from different series to prevent overlap
- Editable Annotations: Demonstrates how to edit annotations and get callbacks on mouse-hover for different annotation types
- Annotation Layers: Demonstrates how to place annotations above chart series, below chart series, or below chart gridlines and axis in SciChart.js
- User Annotated Stock Chart: Demonstrates how to add click to annotation or draw trendlines or shapes on a stock chart using SciChart.js
- Bezier Smooth Stacked Mountain Chart: Using a Bezier Transform to create a smoothed stacked mountain chart in SciChart.js
- Hoverable Buy Sell Markers: Shows how to add hover / tooltips to annotations in SciChart.js
- Multi-Series Style: Shows how to use RenderTransforms API to have multiple different styles in the same series
- Line Splitting by Thresholds: Shows how to use the RenderTransforms API to inject points mid-way into series to create perfect thresholds in line series bisected by a y-value
20. Improvements to Documentation, Example
Multiple updates to the documentation have been made, to cover previous topics that were undocumented, as well as new features in this release.
Topics include:
- VerticalSliceModifier documentation
- Annotation Hover modifier documentation
- SmoothedStackedRenderableSeries documentation
- Engineering Format on axis labels documentation
- Render Data Transforms documentation plus worked examples
- Synchronizing Multiple Charts documentation
We’ve also added a small change to signify when a link in the docs refers to TypeDoc API docs, or documentation page.
21. Bug Fixes
A cumulative list of bug fixes since v3.3 was released can be found below. Further detail at the SciChart.js Changelog!
- (3.4.662, 11 Sept 2024)
- Canvas border was off by 1 pixel if the canvas had fractional width or height
- Added TypeDoc and non-abstract base class for RenderDataTransform
- Ensure RenderDataTransforms run if resampled data changes
- (3.4.659, 27 August 2024)
- Fixed xRange calculation when using dataPointWidthMode.range
- SCJS-1797 Fixed a rendering issue on AMD GPU when using extreme zeroLineY
- SCJS-1793 Fixed a memory leak in label text cache
- SCJS-1793 Fixed a memory leak in WebGL buffers
- (3.4.652, 2nd August 2024)
- Added
dataPointWidthModerange for columns, candlesticks and errorbars. This makes it much easier to get sensible widths for bar-based series if your data has gaps - Added
getPropertiesfunction toColumnSeriesDrawingProviderso multiple can be added to draw different styles - Improved label caching pruning to improve memory behaviour, particularly when using native text
- Fixed a memory leak when using
SciChartOverview - Data-point selection did not select all points in the shown area when using
xyDirection: EXyDirection.XDirection - Fixed
SmoothStackedMountainSeriesbuilder API support
- Added
- (3.4.644, 12th July 2024)
- Added
SciChartHorizontalGroupwhich synchronizes top/bottom axis sizes - Fixed Heatmap
yAxisIdoption was settingxAxisIdinstead - Fixed DataLabel positioning for Band Series when using
singleLabel: true - Allow setting partial styles for ticks and gridlines in axis options
- Fixed an error if legend is forced to update before chart is drawn
- Added
- (3.4.636, 27th June 2024)
- Pie chart was not showing if only one segment was defined
- Fix error when calling
sciChart3DSurface.renderableSeries.clear(true) - PointMarkerPaletteProvider was affecting the stroke of a mountain or band series
- Fix smooth stacked mountain series missing a point when the lower series contains NaN
- Fix bezier transform not recalculating when visibleRange changes
- SCJS-1370 CursorModifier axis labels sometimes in the wrong chart when using subcharts
- SCJS-1394 CursorModifier should not add extra labels on stacked axis
- (3.4.623, 20th June 2024)
- rah
- (3.4.617, 13th June 2024)
- ContourSeries now uses stroke color and thickness properly
- Startup animations on spline series again properly apply the smoothing during the animation
- SCJS-1693 Fixed that trying to render some extended characters would break native text rendering
- SCJS-1754 workaround a browser issue where a canvas could be cleared when switching tabs
- (3.3.592, 20th May 2024)
- Several NaN related issues fixed in this release. We do our best to support them, but still advise you to avoid them if possible. If you need gaps in a series, consider using a paletteProvider and setting the color transparent.
- Added PaletteFactory.createYGradient which takes a set of gradient stops and returns a paletteProvider which colours based on y value
- You can now set indivdual parts of the sciChartSurface.padding and the chart will automatically redraw
- Setting EAnnotationLayer.BelowChart on an svgAnnotation will now behave as foreground (the old behaviour) rather than throw an error
- SCJS-1749 Fix seriesInfo equality check when data contains NaN, fixing continuous render when using rollover or cursor with NaNs
- SCJS-1750 Add support for negative z values in Heatmap series
- SCJS-1752 Fix line palleting is off by one if the dataSeries contains NaN
- (3.3.577, 9th April 2024)
- axis.visibleRange (0,10) is no longer a magic range that would cause autoRange: once to fire.
- SCJS-1722 Charts with startup animations no longer display one frame of the final state at the start
- (3.3.570, 28th Feb 2024)
- Experimental – bundle files built as ESM modules
- Fix a potential error when navigating away from a page with a pie chart
- Fixed a licensing issue where multiple wilddard domains were not handled properly
- (3.3.567, 12th Feb 2024)
- More licensing flexibility for applications using IP addresses as host name
- SCJS-1718 fix crash when using paletteProvider with spline series
- SCJS-1717 Rollover and Cursor modifiers using modifierGroup did not work correctly with subcharts
- rendered event now fires once chart image is copied to target canvas, so performance measurements based on prerender to rendered are more accurate
- PerformanceDebugHelper and performance monitoring points
- createSuspended option on SciChartSurface and nextStateRender to enable callbacks on first chart draw
Where to get it
SciChart.js v3.4 is available by:
Developers – Node/WebPack
Check npm for the latest version.
Don’t forget to see our Tutorials on setting up Npm projects with Webpack!
Developers – Browser Script
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. For Prod we recommend setting a specific version number
// Include script from https://www.jsdelivr.com/package/npm/scichart
<script src="https://cdn.jsdelivr.net/npm/scichart@3/index.min.js" crossorigin="anonymous"></script>
// Import your types
const { SciChartSurface, NumericAxis, FastLineRenderableSeries } = SciChart;
// Now Configure SciChartSurface in code to load the wasm file from CDN
SciChartSurface.useWasmFromCDN();
// Now create a SciChartSurface as you would normally!
const { sciChartSurface, wasmContext } = await SciChartSurface.create("div-id");
By Andrew Burnett-Thompson | Sep 12, 2024
CEO / Founder of SciChart.
Masters (MEng) and PhD in Electronics & Signal Processing.Follow me on LinkedIn for more SciChart content, or twitter at @drandrewbt.
Related Posts
