scichart 2.1.2301 → 2.2.2389

package/Charting/Visuals/sciChartInitCommon.js

@@ -68,7 +68,7 @@ var getMaxHeight = function (divElement) {
  * @param activeCanvas - ECanvasType.canvasWebGL for sciChartSurface.createSingle, ECanvasType.canvas2D for copy canvas,
  * ECanvasType.svg for SciChartPieSurface
  */
-var initCanvas = function (divElement, aspectWidth, aspectHeight, activeCanvas) {
+var initCanvas = function (divElement, aspectWidth, aspectHeight, activeCanvas, disableAspect) {
     if (activeCanvas === void 0) { activeCanvas = ECanvasType.canvasWebGL; }
     WebGlHelper_1.WebGlHelper.initialize();
     DpiHelper_1.DpiHelper.initialize();
@@ -82,6 +82,7 @@ var initCanvas = function (divElement, aspectWidth, aspectHeight, activeCanvas)
     var divWidth = chartRoot.offsetWidth, divHeight = chartRoot.offsetHeight;
     var maxHeight = getMaxHeight(chartRoot);
     var _a = getCanvasSizes(divWidth, divHeight, maxHeight, aspectWidth, aspectHeight), width = _a.width, height = _a.height, aspectRatio = _a.aspectRatio;
+    // set canvasSize for parent div because of all children in absolute
     var canvasWebGL;
     if (activeCanvas === ECanvasType.canvasWebGL) {
         // WebGL Canvas
@@ -158,10 +159,11 @@ var initCanvas = function (divElement, aspectWidth, aspectHeight, activeCanvas)
         domSvgContainer: svgRootElement,
         domSvgAdornerLayer: svgAdornerLayer,
         domDivContainer: divRootElement,
-        aspect: aspectRatio
+        aspect: aspectRatio,
+        disableAspect: disableAspect
     };
 };
-var subscribeToResize = function (chartRoot, aspect, sciChartSurface) {
+var subscribeToResize = function (chartRoot, aspect, sciChartSurface, disableAspect) {
     // @ts-ignore
     var resizeObserver = new ResizeObserver(function (entries) {
         var _loop_1 = function (entry) {
@@ -185,12 +187,14 @@ var subscribeToResize = function (chartRoot, aspect, sciChartSurface) {
                 newWidth = 900;
             }
             // if aspect ration is defined we use is to calc height
-            if (aspect) {
-                newHeight = Math.round(newWidth / aspect);
-            }
-            else if (!newHeight) {
-                // hardcoded aspect ration if newHeight is not defined
-                newHeight = (newWidth * 2) / 3;
+            if (!disableAspect) {
+                if (aspect) {
+                    newHeight = Math.round(newWidth / aspect);
+                }
+                else if (!newHeight) {
+                    // hardcoded aspect ration if newHeight is not defined
+                    newHeight = (newWidth * 2) / 3;
+                }
             }
             // check max-height
             var maxHeight = getMaxHeight(chartRoot);

package/Charting3D/Visuals/Primitives/ScatterPointsSceneEntity.js

@@ -133,8 +133,12 @@ var ScatterPointsSceneEntity = /** @class */ (function (_super) {
         // as its implemented as a non-sparse array
         metadata.forEach(function (meta, index) {
             if (meta) {
-                _this.pointColors.set(index, meta.vertexColorAbgr);
-                _this.pointScales.set(index, meta.pointScale);
+                if (meta.vertexColorAbgr) {
+                    _this.pointColors.set(index, meta.vertexColorAbgr);
+                }
+                if (meta.pointScale) {
+                    _this.pointScales.set(index, meta.pointScale);
+                }
             }
         });
         return { colors: this.pointColors, scales: this.pointScales };

package/Charting3D/Visuals/SciChart3DRenderer.js

@@ -64,7 +64,7 @@ var SciChart3DRenderer = /** @class */ (function () {
      * The main render loop
      */
     SciChart3DRenderer.prototype.render = function () {
-        if (this.scs.isDeleted) {
+        if (this.scs.isDeleted || !this.scs.isInitialized) {
             return;
         }
         // Step 1: Sanity checks

package/Charting3D/Visuals/SciChart3DSurface.d.ts

@@ -66,14 +66,19 @@ export declare class SciChart3DSurface extends SciChartSurfaceBase {
      * Note if loading from CDN the version number of data/wasm Urls must match the version number of SciChart.js you are using.
      * @example
      * ```ts
-     * SciChart.SciChartSurface.configure({
-     *  dataUrl: "https://cdn.jsdelivr.net/npm/scichart@1.3.1500/_wasm/scichart2d.data",
-     *  wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@1.3.1500/_wasm/scichart2d.wasm"
+     * // 3D Charts
+     * SciChart.SciChart3DSurface.configure({
+     *  dataUrl: "https://cdn.jsdelivr.net/npm/scichart@2.2.2378/_wasm/scichart3d.data",
+     *  wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@2.2.2378/_wasm/scichart3d.wasm"
      * });
      * ```
      * @param config
      */
     static configure(config: TSciChartConfig): void;
+    /**
+     * Tell SciChart to load the Wasm and Data files from CDN, rather than expecting them to be served by the host server.
+     */
+    static useWasmFromCDN(): void;
     /**
      * Creates a {@link SciChart3DSurface} and {@link TSciChart3D | WebAssembly Context} to occupy the div by element ID in your DOM.
      * @remarks This method is async and must be awaited

package/Charting3D/Visuals/SciChart3DSurface.js

@@ -31,6 +31,7 @@ var DefaultViewportManager3D_1 = require("./DefaultViewportManager3D");
 var GizmoEntity_1 = require("./GizmoEntity");
 var RootSceneEntity_1 = require("./RootSceneEntity");
 var SciChart3DRenderer_1 = require("./SciChart3DRenderer");
+var BuildStamp_1 = require("../../Core/BuildStamp");
 exports.sciChartConfig3D = {};
 /**
  * @summary The {@link SciChart3DSurface} is the root 3D Chart control in SciChart's High Performance Real-time
@@ -124,9 +125,10 @@ var SciChart3DSurface = /** @class */ (function (_super) {
      * Note if loading from CDN the version number of data/wasm Urls must match the version number of SciChart.js you are using.
      * @example
      * ```ts
-     * SciChart.SciChartSurface.configure({
-     *  dataUrl: "https://cdn.jsdelivr.net/npm/scichart@1.3.1500/_wasm/scichart2d.data",
-     *  wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@1.3.1500/_wasm/scichart2d.wasm"
+     * // 3D Charts
+     * SciChart.SciChart3DSurface.configure({
+     *  dataUrl: "https://cdn.jsdelivr.net/npm/scichart@2.2.2378/_wasm/scichart3d.data",
+     *  wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@2.2.2378/_wasm/scichart3d.wasm"
      * });
      * ```
      * @param config
@@ -136,6 +138,13 @@ var SciChart3DSurface = /** @class */ (function (_super) {
         exports.sciChartConfig3D.dataUrl = (_a = config === null || config === void 0 ? void 0 : config.dataUrl) !== null && _a !== void 0 ? _a : undefined;
         exports.sciChartConfig3D.wasmUrl = (_b = config === null || config === void 0 ? void 0 : config.wasmUrl) !== null && _b !== void 0 ? _b : undefined;
     };
+    /**
+     * Tell SciChart to load the Wasm and Data files from CDN, rather than expecting them to be served by the host server.
+     */
+    SciChart3DSurface.useWasmFromCDN = function () {
+        exports.sciChartConfig3D.dataUrl = "https://cdn.jsdelivr.net/npm/scichart@".concat(BuildStamp_1.libraryVersion, "/_wasm/scichart3d.data");
+        exports.sciChartConfig3D.wasmUrl = "https://cdn.jsdelivr.net/npm/scichart@".concat(BuildStamp_1.libraryVersion, "/_wasm/scichart3d.wasm");
+    };
     /**
      * Creates a {@link SciChart3DSurface} and {@link TSciChart3D | WebAssembly Context} to occupy the div by element ID in your DOM.
      * @remarks This method is async and must be awaited

package/Charting3D/Visuals/createMaster3d.js

@@ -156,20 +156,26 @@ var createMaster = function () {
                 InitializeChart: function () {
                     resolve({ getChildSurfaces: getChildSurfaces, createChildSurface: createChildSurface, wasmContext: wasmContext });
                 },
-                Draw: function () {
-                    exports.sciChartDestinations.forEach(function (dest) {
-                        var canvasElementId = dest.canvasElementId, sciChartSurface = dest.sciChartSurface;
-                        var chart = wasmContext.SCRTGetGlobalSampleChartInterface3D();
-                        // TODO
-                        if (chart.GetCurrentDestination()) {
-                            var currDestID = chart.GetCurrentDestination().GetID();
-                            if (currDestID === canvasElementId &&
-                                sciChartSurface.isInitialized &&
-                                !sciChartSurface.isDeleted) {
-                                sciChartSurface.doDrawingLoop();
-                            }
-                        }
-                    });
+                Draw: function (canvasId) {
+                    var dest = exports.sciChartDestinations.find(function (d) { return d.canvasElementId === canvasId; });
+                    if (dest) {
+                        dest.sciChartSurface.doDrawingLoop();
+                    }
+                    // sciChartDestinations.forEach(dest => {
+                    //     const { canvasElementId, sciChartSurface } = dest;
+                    //     const chart = wasmContext.SCRTGetGlobalSampleChartInterface3D();
+                    //     // TODO
+                    //     if (chart.GetCurrentDestination()) {
+                    //         const currDestID = chart.GetCurrentDestination().GetID();
+                    //         if (
+                    //             currDestID === canvasElementId &&
+                    //             sciChartSurface.isInitialized &&
+                    //             !sciChartSurface.isDeleted
+                    //         ) {
+                    //             (sciChartSurface as SciChart3DSurface).doDrawingLoop();
+                    //         }
+                    //     }
+                    // });
                 },
                 Update: function (deltaTime) {
                     // console.log("Update");

package/Charting3D/Visuals/createSingle3d.js

@@ -9,7 +9,6 @@ var sciChartInitCommon_1 = require("../../Charting/Visuals/sciChartInitCommon");
 var SciChartSurfaceBase_1 = require("../../Charting/Visuals/SciChartSurfaceBase");
 var BuildStamp_1 = require("../../Core/BuildStamp");
 var WebGlHelper_1 = require("../../Core/WebGlHelper");
-var logger_1 = require("../../utils/logger");
 var licenseManager3D_1 = require("./licenseManager3D");
 var SciChart3DSurface_1 = require("./SciChart3DSurface");
 var createSingle3dInternal = function (divElement, options) {
@@ -67,16 +66,16 @@ var initDrawEngineSingleChart = function (wasmContext, canvases, resolve, theme)
             }, 0);
             resolve({ wasmContext: wasmContext, sciChart3DSurface: scs });
         },
-        Draw: function () {
+        Draw: function (canvasId) {
             if (scs.isInitialized) {
                 scs.doDrawingLoop();
             }
         },
         Update: function (deltaTime) {
-            logger_1.Logger.log("SciChart3DSurface.ts Update()");
+            //Logger.log("SciChart3DSurface.ts Update()");
         },
         ShutDownChart: function () {
-            logger_1.Logger.log("SciChart3DSurface.ts ShutDownChart");
+            //Logger.log("SciChart3DSurface.ts ShutDownChart");
         }
     };
     var chartInitObj = wasmContext.SCRTSampleChartInterface3D.implement(chartInitializer);

package/Charting3D/Visuals/licenseManager3D.js

@@ -34,7 +34,9 @@ var applyLicense3D = function (licenseContext, sciChartSurface, isSingle) {
         (0, licenseManager2D_1.setCallbacks3D)(callbacks3D);
         (0, licenseManager2D_1.applyLicense)(licenseContext);
     }
-    (0, licenseManager2D_1.updateLicenseDisplay)((0, licenseManager2D_1.getLicenseInfo)(licenseContext), sciChartSurface, false, false);
+    else {
+        (0, licenseManager2D_1.updateLicenseDisplay)((0, licenseManager2D_1.getLicenseInfo)(licenseContext), sciChartSurface, false, false);
+    }
     if (!isSingle)
         shouldApplyLicense3D = false;
 };

package/Core/BuildStamp.d.ts

@@ -1,4 +1,4 @@
 import { TSciChart } from "../types/TSciChart";
 import { TSciChart3D } from "../types/TSciChart3D";
-export declare const libraryVersion = "2.1.2301";
+export declare const libraryVersion = "2.2.2389";
 export declare const checkBuildStamp: (wasmContext: TSciChart | TSciChart3D) => boolean;

package/Core/BuildStamp.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkBuildStamp = exports.libraryVersion = void 0;
-var buildStamp = "2022-03-30T00:00:00";
+var buildStamp = "2022-06-08T00:00:00";
 var result;
 // tslint:disable-next-line:no-var-requires
-exports.libraryVersion = "2.1.2301";
+exports.libraryVersion = "2.2.2389";
 var checkBuildStamp = function (wasmContext) {
     if (result !== undefined)
         return result;

package/Core/Telemetry.d.ts

@@ -0,0 +1,7 @@
+export declare const getUserCookie: () => {
+    userId: string;
+    sessionId: string;
+    sessionStart: number;
+};
+export declare const shouldSendTelemetry: () => boolean;
+export declare const sendTelemetry: () => void;

package/Core/Telemetry.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendTelemetry = exports.shouldSendTelemetry = exports.getUserCookie = void 0;
+var licenseManager2dState_1 = require("../Charting/Visuals/licenseManager2dState");
+var cookie_1 = require("../utils/cookie");
+var BuildStamp_1 = require("./BuildStamp");
+var app_1 = require("../constants/app");
+var guid_1 = require("../utils/guid");
+var sessionTime = 60 * 60 * 1000;
+var hasSent = false;
+var setUserCookie = function (userId, sessionId, sessionStart) {
+    var cookieVal = "".concat(userId, ",").concat(sessionId, ",").concat(sessionStart);
+    return (0, cookie_1.setCookie)("scUser", cookieVal, 365);
+};
+var getUserCookie = function () {
+    var cookie = (0, cookie_1.getCookie)("scUser");
+    if (cookie) {
+        var parts = cookie.split(",");
+        if (parts.length === 3)
+            return {
+                userId: parts[0],
+                sessionId: parts[1],
+                sessionStart: Number.parseInt(parts[2], 10)
+            };
+    }
+    return {
+        userId: (0, guid_1.base64Id)(),
+        sessionId: (0, guid_1.base64Id)(),
+        sessionStart: 0
+    };
+};
+exports.getUserCookie = getUserCookie;
+var shouldSendTelemetry = function () {
+    // Not in test
+    if (app_1.IS_TEST_ENV)
+        return false;
+    // Not if we've already done it
+    if (hasSent)
+        return false;
+    // not if the license is not dev
+    if (!licenseManager2dState_1.licenseManager2dState.getIsDev())
+        return false;
+    // not if telemetry not enabled
+    if (!licenseManager2dState_1.licenseManager2dState.getTelemetry())
+        return false;
+    // not if not online
+    if (window && !window.navigator.onLine)
+        return false;
+    return true;
+};
+exports.shouldSendTelemetry = shouldSendTelemetry;
+var sendTelemetry = function () {
+    if (!(0, exports.shouldSendTelemetry)())
+        return;
+    var user = (0, exports.getUserCookie)();
+    var timeStamp = new Date().toISOString();
+    // New sessionId if previous has expired
+    if (Date.now() - user.sessionStart < sessionTime) {
+        // Don't send more than once per session.
+        return;
+    }
+    // Reset the session time.  Sessions expire 30 minutes after the last use in the session.
+    // Session tracking is more relevant once we start collecting more detailed per-chart data
+    user.sessionId = (0, guid_1.base64Id)();
+    user.sessionStart = Date.now();
+    setUserCookie(user.userId, user.sessionId, user.sessionStart);
+    var eventData = {
+        time: timeStamp,
+        iKey: "210b4d64-8147-471e-b6cb-244a2c939455",
+        name: "Microsoft.ApplicationInsights.210b4d648147471eb6cb244a2c939455.Event",
+        tags: {
+            "ai.user.id": user.userId,
+            "ai.session.id": user.sessionId,
+            "ai.device.id": "browser",
+            "ai.device.type": "Browser"
+        },
+        data: {
+            baseType: "EventData",
+            baseData: {
+                ver: 2,
+                name: "LicenseSet",
+                properties: {
+                    platform: "JS",
+                    licenseType: licenseManager2dState_1.licenseManager2dState.getLicenseType(),
+                    orderId: licenseManager2dState_1.licenseManager2dState.getOrderId(),
+                    productCode: licenseManager2dState_1.licenseManager2dState.getProductCode(),
+                    isDev: licenseManager2dState_1.licenseManager2dState.getIsDev(),
+                    devCount: licenseManager2dState_1.licenseManager2dState.getDevCount(),
+                    sciChartVersion: BuildStamp_1.libraryVersion
+                },
+                measurements: {}
+            }
+        }
+    };
+    if (window.location.hostname.includes(".csb.app") || window.location.hostname.includes(".codesandbox.io")) {
+        eventData.data.baseData.properties.url = window.location.href;
+    }
+    var endPointUrl = "https://dc.services.visualstudio.com/v2/track";
+    var body = JSON.stringify([eventData]);
+    fetch(endPointUrl, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: body
+    }).catch();
+    hasSent = true;
+};
+exports.sendTelemetry = sendTelemetry;

package/Core/storage/localStorageApi.d.ts

@@ -1,8 +1,12 @@
 declare function getIsLicenseDebug(): boolean;
+declare function setIsLicenseDebug(value: boolean): void;
+declare function clearLicensingDebug(): void;
 declare function getLicenseWizardPort(): number;
 declare function getLicenseWizardMaxPort(): number;
 export declare const localStorageApi: {
     getIsLicenseDebug: typeof getIsLicenseDebug;
+    setIsLicenseDebug: typeof setIsLicenseDebug;
+    clearLicensingDebug: typeof clearLicensingDebug;
     getLicenseWizardMaxPort: typeof getLicenseWizardMaxPort;
     getLicenseWizardPort: typeof getLicenseWizardPort;
 };

package/Core/storage/localStorageApi.js

@@ -7,6 +7,16 @@ function getIsLicenseDebug() {
         return undefined;
     return localStorage.getItem("LICENSE_DEBUG") === "1";
 }
+function setIsLicenseDebug(value) {
+    if (checkLocalStorageIsUndefined())
+        return;
+    localStorage.setItem("LICENSE_DEBUG", value ? "1" : "0");
+}
+function clearLicensingDebug() {
+    if (checkLocalStorageIsUndefined())
+        return;
+    localStorage.removeItem("LICENSE_DEBUG");
+}
 function getLicenseWizardPort() {
     if (checkLocalStorageIsUndefined())
         return undefined;
@@ -27,6 +37,8 @@ function getLicenseWizardMaxPort() {
 }
 exports.localStorageApi = {
     getIsLicenseDebug: getIsLicenseDebug,
+    setIsLicenseDebug: setIsLicenseDebug,
+    clearLicensingDebug: clearLicensingDebug,
     getLicenseWizardMaxPort: getLicenseWizardMaxPort,
     getLicenseWizardPort: getLicenseWizardPort
 };

package/README.md

@@ -1,6 +1,6 @@
 # SciChart.js: Ultra High Performance Realtime JavaScript Chart Library
 
-[![SciChart.js Ultra High Performance Realtime JavaScript Chart library](Sandbox/scichart-js-javascript-chart-collage-1485.jpg)](https://www.scichart.com/javascript-chart-features)
+[![SciChart.js Ultra High Performance Realtime JavaScript Chart library](https://www.scichart.com/wp-content/uploads/2022/05/scichart-js-oil-gas-demo-release-22-1.jpg)](https://www.scichart.com/javascript-chart-features)
 
 [SciChart](https://www.scichart.com) provides a High Performance JavaScript & TypeScript Chart library which uses WebGL and WebAssembly to achieve incredible real-time and big-data performance.
 
@@ -10,11 +10,23 @@ SciChart is the _**only viable solution for mission-critical data visualization
 
 Whether you are building Dashboards for business, stock-chart or trading apps, scientific or medical apps, or building a kiosk application on custom hardware with Electron, SciChart's ultra-fast 2D/3D WebGL rendering technology codenamed _Visual Xccelerator®_ will let you build apps, services and dashboards with rich charts & graphs that will delight your users.
 
-# Getting Started
+[![SciChart.js Ultra High Performance Realtime JavaScript Chart library](Sandbox/scichart-js-javascript-chart-collage-1485.jpg)](https://www.scichart.com/javascript-chart-features)
+
+# What's New!
 
-We've prepared a short [Getting Started guide here](https://www.scichart.com/getting-started-scichart-js).
+Check out what's new in SciChart.js at the below pages:
+
+-   [What's New in SciChart.js v2.0](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.x.html)
+-   [What's New in SciChart.js v2.1](https://www.scichart.com/documentation/js/current/WhatsNewInSciChart2_1.html)
+-   [What's New in SciChart.js v2.2](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.2.html)
+
+See more at the Release Notes section at bottom of the page.
+
+# Getting Started
 
-[![Getting Started with SciChart.js](Sandbox/scichart-js-getting-started-1485.jpg)](https://www.scichart.com/getting-started-scichart-js)
+> We've prepared a short [Getting Started guide here](https://www.scichart.com/getting-started-scichart-js).
+>
+> This will walk you through the entire process of starting a trial and show you where tutorials and documentation are and examples.
 
 ## Quick Start with Browser Bundle
 
@@ -26,11 +38,10 @@ We've prepared a short [Getting Started guide here](https://www.scichart.com/get
 
     ```javascript
     async function initSciChart() {
-        // In order to load data file from the CDN we need to set dataUrl
-        SciChart.SciChartSurface.configure({
-            dataUrl: "https://cdn.jsdelivr.net/npm/scichart@2.1.2261/_wasm/scichart2d.data",
-            wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@2.1.2261/_wasm/scichart2d.wasm"
-        });
+        // See deployment options for WebAssembly at https://www.scichart.com/documentation/js/current/Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html
+        // call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
+        SciChart.SciChartSurface.useWasmFromCDN();
+
         // Create a chart using the json builder api
         await SciChart.chartBuilder.buildChart("scichart-root", {
             series: {
@@ -144,8 +155,11 @@ SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
     import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
     import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
 
-    // You may need this to configure from where wasm and data files are served
-    // SciChartSurface.configure({ dataUrl: "/custom/scichart2d.data", wasmUrl: "/other/scichart2d.wasm" });
+    // Optional:
+    // call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
+    // Alternatively, you can package wasm with webpack or load from URL
+    SciChart.SciChartSurface.useWasmFromCDN();
+    // See deployment options for WebAssembly at https://www.scichart.com/documentation/js/current/Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html
 
     async function initSciChart() {
         // Create the SciChartSurface in the div 'scichart-root'
@@ -193,9 +207,9 @@ SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
 
 Follow [the link](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-simple-chart) to find source code for this example.
 
-## Documentation
+## Documentation & Tutorials
 
-We've taken the time to create hundreds of documentation pages for our JavaScript Charts, which you can find over at https://www.scichart.com/javascript-chart-documentation. Take a look here for tutorials, getting-started guides, API Docs (TypeDoc) and more.
+We've taken the time to create hundreds of documentation pages and video tutorials for our JavaScript Charts, which you can find over at https://www.scichart.com/javascript-chart-documentation. Take a look here for tutorials, getting-started guides, API Docs (TypeDoc) and more.
 
 [![JavaScript Chart Documentation](Sandbox/scichart-js-javascript-chart-documentation.PNG)](https://www.scichart.com/javascript-chart-documentation)
 
@@ -205,8 +219,28 @@ An online demo version of scichart.js.examples can be seen at https://demo.scich
 
 # Release Notes
 
+## Version 2.2 with new Chart Types
+
+See [What's New in SciChart.js v2.2](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.2.html)
+
+**New Features**
+
+-   Added an Oil & gas Showcase demo
+-   Added a Lollipop (Impulse / Stem) Chart Type
+-   Added Error Bars (horizontal & vertical error bars) chart types
+-   Added multiple new enhancements to Pie / Donut Chart, including
+    -   Animated Updates on Pie chart segments
+    -   Ability to format, hide or change the HTML content of pie chart labels
+    -   Added multiple styling & configuration improvements to pie charts
+-   Added Axis configuration options
+    -   Ability to draw series behind axis (axis inside chart)
+    -   You can now set the Axis Background and Border
+-
+
 ## Version 2.1 with Major Performance Improvements
 
+See [What's New in SciChart.js v2.1](https://www.scichart.com/documentation/js/current/WhatsNewInSciChart2_1.html)
+
 We’ve used our expertise high performance computing in other platforms of SciChart to make massive improvements to chart rendering, updating and startup speed in SciChart.js v2.1.
 
 **Performance improvements**:
@@ -250,6 +284,8 @@ See all the details at [SciChart.js v2.1 release](https://www.scichart.com/scich
 
 ## Version 2.0
 
+See [What's New in SciChart.js v2.0](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.x.html)
+
 SciChart.js v2 is a huge release with many new features, improvements and fixes including:
 
 -   New pure-json builder api