scichart 2.1.2261 → 2.1.2267

package/Charting/ChartModifiers/LegendModifier.d.ts

@@ -34,9 +34,9 @@ export interface ILegendModifierOptions extends IChartModifierBaseOptions {
      */
     margin?: number;
     /**
-     * The parent div element Id, the Legend will be appended to this element
+     * The parent div element Id or reference, the Legend will be appended to this element
      */
-    placementDivId?: string;
+    placementDivId?: string | HTMLDivElement;
 }
 /**
  * The LegendModifier provides interactive legend behavior on a 2D {@link SciChartSurface}

package/Charting/Visuals/Legend/SciChartLegend.d.ts

@@ -35,5 +35,11 @@ export declare class SciChartLegend extends SciChartLegendBase {
     /** @inheritDoc */
     protected addEventListeners(): void;
     /** @inheritDoc */
+    protected removeEventListeners(): void;
+    /**
+     * adds event listeners to a specific {@link IRenderableSeries} series
+     */
+    protected addEventListenerToSeries(rs: IRenderableSeries): void;
+    /** @inheritDoc */
     protected getInnerHTML(): string;
 }

package/Charting/Visuals/Legend/SciChartLegend.js

@@ -79,7 +79,36 @@ var SciChartLegend = /** @class */ (function (_super) {
     };
     /** @inheritDoc */
     SciChartLegend.prototype.addEventListeners = function () {
-        this.renderableSeriesArray.forEach(function (rs) { return addEventListenerToSeries(rs); });
+        var _this = this;
+        this.renderableSeriesArray.forEach(function (rs) { return _this.addEventListenerToSeries(rs); });
+    };
+    /** @inheritDoc */
+    SciChartLegend.prototype.removeEventListeners = function () {
+        var _this = this;
+        this.renderableSeriesArray.forEach(function (rs) { return _this.removeEventListenerFromSeries(rs.id); });
+    };
+    /**
+     * adds event listeners to a specific {@link IRenderableSeries} series
+     */
+    SciChartLegend.prototype.addEventListenerToSeries = function (rs) {
+        var el = this.getParentDiv().querySelector("[id='".concat(rs.id, "']"));
+        if (el) {
+            var onChangeEventListener_1 = function (e) { return (rs.isVisible = e.target.checked); };
+            el.addEventListener("change", onChangeEventListener_1);
+            var eventSubscriptionItem = {
+                element: el,
+                eventType: "change",
+                eventListener: onChangeEventListener_1,
+                delete: function () { return el.removeEventListener("change", onChangeEventListener_1); }
+            };
+            var eventListenersForRenderableSeries = this.eventListenersCollection.get(rs.id);
+            if (eventListenersForRenderableSeries) {
+                eventListenersForRenderableSeries.push(eventSubscriptionItem);
+            }
+            else {
+                this.eventListenersCollection.set(rs.id, [eventSubscriptionItem]);
+            }
+        }
     };
     /** @inheritDoc */
     SciChartLegend.prototype.getInnerHTML = function () {
@@ -104,15 +133,3 @@ var SciChartLegend = /** @class */ (function (_super) {
     return SciChartLegend;
 }(SciChartLegendBase_1.SciChartLegendBase));
 exports.SciChartLegend = SciChartLegend;
-/** @ignore */
-var addEventListenerToSeries = function (rs) {
-    var el = document.getElementById(rs.id);
-    if (el) {
-        // @ts-ignore
-        el.addEventListener("change", function (e) { return (rs.isVisible = e.target.checked); });
-    }
-};
-/** @ignore */
-var removeEventListenerFromSeries = function (renderableSeriesId) {
-    // TODO: to think about how to remove event listeners when removing series
-};

package/Charting/Visuals/Legend/SciChartLegendBase.d.ts

@@ -10,6 +10,11 @@ export declare type TLegendItem = {
     checked: boolean;
     gradient?: GradientParams;
 };
+export interface IEventSubscriptionItem extends IDeletable {
+    element: HTMLElement;
+    eventType: string;
+    eventListener: EventListener;
+}
 /**
  * Enumeration constants to define legend orientation
  */
@@ -48,7 +53,8 @@ export declare abstract class SciChartLegendBase implements IDeletable {
     protected marginProperty: number;
     protected isDirty: boolean;
     protected parentSurfaceProperty: ISciChartSurfaceBase;
-    protected placementDivIdProperty: string;
+    protected placementDivIdProperty: string | HTMLDivElement;
+    protected eventListenersCollection: Map<string, IEventSubscriptionItem[]>;
     /** @inheritDoc */
     abstract applyTheme(): void;
     setInvalidateParentSurface(value: () => void): void;
@@ -107,13 +113,13 @@ export declare abstract class SciChartLegendBase implements IDeletable {
      */
     set margin(value: number);
     /**
-     * Gets or sets the parent div element for the Legend
+     * Gets or sets the parent div element reference or id for the Legend
      */
-    get placementDivId(): string;
+    get placementDivId(): string | HTMLDivElement;
     /**
-     * Gets or sets the parent div element for the Legend
+     * Gets or sets the parent div element reference or id for the Legend
      */
-    set placementDivId(value: string);
+    set placementDivId(value: string | HTMLDivElement);
     /** @inheritDoc */
     delete(): void;
     /**
@@ -156,7 +162,15 @@ export declare abstract class SciChartLegendBase implements IDeletable {
      * When overridden in a derived class, will be called when its time to add event listeners to series
      */
     protected abstract addEventListeners(): void;
-    private getParentDiv;
+    /**
+     * When overridden in a derived class, will be called when its time to remove event listeners from series
+     */
+    protected abstract removeEventListeners(): void;
+    /**
+     * removes event listeners from a specific {@link IRenderableSeries} series
+     */
+    protected removeEventListenerFromSeries: (renderableSeriesId: string) => void;
+    protected getParentDiv(): HTMLDivElement;
 }
 export declare const getLegendItemHtml: (orientation: ELegendOrientation, showCheckboxes: boolean, showSeriesMarkers: boolean, item: TLegendItem) => string;
 export declare const getLegendContainerHtml: (placement: ELegendPlacement, textColor: string, backgroundColor: string, margin: Thickness, body: string) => string;

package/Charting/Visuals/Legend/SciChartLegendBase.js

@@ -35,11 +35,24 @@ var ELegendType;
  */
 var SciChartLegendBase = /** @class */ (function () {
     function SciChartLegendBase() {
+        var _this = this;
         this.orientationProperty = ELegendOrientation.Vertical;
         this.showLegendProperty = true;
         this.placementProperty = ELegendPlacement.TopLeft;
         this.marginProperty = 10;
         this.isDirty = true;
+        this.eventListenersCollection = new Map();
+        /**
+         * removes event listeners from a specific {@link IRenderableSeries} series
+         */
+        this.removeEventListenerFromSeries = function (renderableSeriesId) {
+            var _a;
+            (_a = _this.eventListenersCollection.get(renderableSeriesId)) === null || _a === void 0 ? void 0 : _a.forEach(function (_a) {
+                var element = _a.element, eventListener = _a.eventListener, eventType = _a.eventType;
+                element.removeEventListener(eventType, eventListener);
+            });
+            _this.eventListenersCollection.delete(renderableSeriesId);
+        };
     }
     SciChartLegendBase.prototype.setInvalidateParentSurface = function (value) {
         this.invalidateParentSurface = value;
@@ -156,13 +169,13 @@ var SciChartLegendBase = /** @class */ (function () {
     });
     Object.defineProperty(SciChartLegendBase.prototype, "placementDivId", {
         /**
-         * Gets or sets the parent div element for the Legend
+         * Gets or sets the parent div element reference or id for the Legend
          */
         get: function () {
             return this.placementDivIdProperty;
         },
         /**
-         * Gets or sets the parent div element for the Legend
+         * Gets or sets the parent div element reference or id for the Legend
          */
         set: function (value) {
             this.delete();
@@ -175,8 +188,8 @@ var SciChartLegendBase = /** @class */ (function () {
     /** @inheritDoc */
     SciChartLegendBase.prototype.delete = function () {
         var _a;
-        // TODO: remove listeners from renderable series to prevent memory leaks in older browsers
         if (this.div) {
+            this.removeEventListeners();
             (_a = this.getParentDiv()) === null || _a === void 0 ? void 0 : _a.removeChild(this.div);
             this.div = undefined;
         }
@@ -239,7 +252,12 @@ var SciChartLegendBase = /** @class */ (function () {
         }
     };
     SciChartLegendBase.prototype.getParentDiv = function () {
-        return this.placementDivId ? document.getElementById(this.placementDivId) : this.rootDiv;
+        if (this.placementDivId) {
+            return typeof this.placementDivId === "string"
+                ? document.getElementById(this.placementDivId)
+                : this.placementDivId;
+        }
+        return this.rootDiv;
     };
     return SciChartLegendBase;
 }());

package/Charting/Visuals/Legend/SciChartPieLegend.d.ts

@@ -43,6 +43,8 @@ export declare class SciChartPieLegend extends SciChartLegendBase {
      * @inheritDoc
      */
     protected addEventListeners(): void;
+    /** @inheritDoc */
+    protected removeEventListeners(): void;
     /**
      * @inheritDoc
      */

package/Charting/Visuals/Legend/SciChartPieLegend.js

@@ -95,10 +95,25 @@ var SciChartPieLegend = /** @class */ (function (_super) {
     SciChartPieLegend.prototype.addEventListeners = function () {
         var _this = this;
         this.pieSegmentArray.forEach(function (ps) {
-            var el = document.getElementById(getCheckboxId(ps.id));
-            (0, SciChartPieSurface_1.addEventListenerToPieSegment)(ps, el, _this.animate);
+            var el = _this.getParentDiv().querySelector("#".concat(getCheckboxId(ps.id)));
+            if (!el) {
+                return;
+            }
+            var eventSubscriptionItem = (0, SciChartPieSurface_1.addEventListenerToPieSegment)(ps, el, _this.animate);
+            var eventListenersForRenderableSeries = _this.eventListenersCollection.get(ps.id);
+            if (eventListenersForRenderableSeries) {
+                eventListenersForRenderableSeries.push(eventSubscriptionItem);
+            }
+            else {
+                _this.eventListenersCollection.set(ps.id, [eventSubscriptionItem]);
+            }
         });
     };
+    /** @inheritDoc */
+    SciChartPieLegend.prototype.removeEventListeners = function () {
+        var _this = this;
+        this.pieSegmentArray.forEach(function (ps) { return _this.removeEventListenerFromSeries(ps.id); });
+    };
     /**
      * @inheritDoc
      */
@@ -123,7 +138,3 @@ var SciChartPieLegend = /** @class */ (function (_super) {
 exports.SciChartPieLegend = SciChartPieLegend;
 /** @ignore */
 var getCheckboxId = function (pieSegmentId) { return "check".concat(pieSegmentId); };
-/** @ignore */
-var removeEventListenerFromSeries = function (renderableSeriesId) {
-    // TODO: to think about how to remove event listeners when removing series
-};

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.d.ts

@@ -4,6 +4,7 @@ import { ObservableArray } from "../../../Core/ObservableArray";
 import { ESciChartSurfaceType } from "../../../types/SciChartSurfaceType";
 import { TSciChartSurfaceCanvases } from "../../../types/TSciChartSurfaceCanvases";
 import { IThemeProvider } from "../../Themes/IThemeProvider";
+import { IEventSubscriptionItem } from "../Legend/SciChartLegendBase";
 import { SciChartPieLegend } from "../Legend/SciChartPieLegend";
 import { ISciChartSurfaceBase } from "../SciChartSurfaceBase";
 import { IPieSurfaceOptions } from "./IPieSurfaceOptions";
@@ -45,7 +46,7 @@ export declare class SciChartPieSurface implements ISciChartSurfaceBase {
      * @param width Optional - the width of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      * @param height Optional - the height of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      */
-    static create(divElementId: string, options?: IPieSurfaceOptions): Promise<SciChartPieSurface>;
+    static create(divElement: string | HTMLDivElement, options?: IPieSurfaceOptions): Promise<SciChartPieSurface>;
     /**
      * @summary Gets the collection of {@link IPieSegment} - the pie segments or slices on this {@link SciChartPieSurface}
      * @description A {@link SciChartPieSurface} can have one to many {@link IPieSegment | Pie Segments}.     *
@@ -178,4 +179,4 @@ export declare class SciChartPieSurface implements ISciChartSurfaceBase {
     private applySciChartBackground;
 }
 /** @ignore */
-export declare const addEventListenerToPieSegment: (ps: IPieSegment, el: HTMLElement, animate: boolean) => void;
+export declare const addEventListenerToPieSegment: (ps: IPieSegment, el: HTMLElement, animate: boolean) => IEventSubscriptionItem;

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.js

@@ -118,10 +118,10 @@ var SciChartPieSurface = /** @class */ (function () {
      * @param width Optional - the width of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      * @param height Optional - the height of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      */
-    SciChartPieSurface.create = function (divElementId, options) {
+    SciChartPieSurface.create = function (divElement, options) {
         var _a, _b;
         (0, chartBuilder_1.ensureRegistrations)();
-        var canvases = sciChartInitCommon_1.default.initCanvas(divElementId, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.svg);
+        var canvases = sciChartInitCommon_1.default.initCanvas(divElement, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.svg);
         return new Promise(function (resolve) {
             var conflictingRenderContextDestinations = __spreadArray(__spreadArray(__spreadArray([], createMaster_1.sciChartDestinations, true), createMaster3d_1.sciChartDestinations, true), createSingle_1.sciChartSingleDestinations, true).filter(function (destination) { return destination.sciChartSurface.domChartRoot.id === canvases.domChartRoot.id; });
             conflictingRenderContextDestinations.forEach(function (destination) { return destination.sciChartSurface.delete(); });
@@ -129,6 +129,7 @@ var SciChartPieSurface = /** @class */ (function () {
             var scps = new SciChartPieSurface(canvases, options);
             scps.applyTheme(options === null || options === void 0 ? void 0 : options.theme);
             var unsub = sciChartInitCommon_1.default.subscribeToResize(canvases.domChartRoot, canvases.aspect, scps);
+            scps.addDeletable(unsub);
             // setTimeout is used to make function async like createSciChartSurface, to have a consistent API
             setTimeout(function () { return resolve(scps); }, 0);
         });
@@ -392,8 +393,11 @@ var SciChartPieSurface = /** @class */ (function () {
         // ADD EVENT LISTENERS
         if (!app_1.IS_TEST_ENV) {
             this.pieSegments.asArray().forEach(function (ps) {
-                var el = document.getElementById(ps.id);
-                (0, exports.addEventListenerToPieSegment)(ps, el, _this.animate);
+                var el = _this.domChartRoot.querySelector("[id='".concat(ps.id, "']"));
+                if (el) {
+                    var subscriptionToken = (0, exports.addEventListenerToPieSegment)(ps, el, _this.animate);
+                    _this.addDeletable(subscriptionToken);
+                }
             });
         }
         this.drawSegmentTitles();
@@ -561,31 +565,36 @@ var calcTitlePosition = function (x, y, outerRadius, innerRadius, a1, a2, delta,
 var isListenerBlocked = false;
 /** @ignore */
 var addEventListenerToPieSegment = function (ps, el, animate) {
-    if (el) {
-        el.addEventListener("click", function (e) {
-            if (!animate) {
-                ps.isSelected = !ps.isSelected;
-                return;
-            }
-            // ANIMATE
-            if (!isListenerBlocked) {
-                var ROUNDS_1 = 10;
-                var directionDown = ps.isSelected;
-                var start_1 = directionDown ? PieSegment_1.PieSegment.DEFAULT_DELTA : 0;
-                var d_1 = directionDown ? -PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1 : PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1;
-                isListenerBlocked = true;
-                (function myLoop(k) {
-                    setTimeout(function () {
-                        ps.delta = start_1 + d_1 * k;
-                        if (k === ROUNDS_1) {
-                            isListenerBlocked = false;
-                        }
-                        if (++k <= ROUNDS_1)
-                            myLoop(k);
-                    }, 20);
-                })(1);
-            }
-        });
-    }
+    var eventListener = function (e) {
+        if (!animate) {
+            ps.isSelected = !ps.isSelected;
+            return;
+        }
+        // ANIMATE
+        if (!isListenerBlocked) {
+            var ROUNDS_1 = 10;
+            var directionDown = ps.isSelected;
+            var start_1 = directionDown ? PieSegment_1.PieSegment.DEFAULT_DELTA : 0;
+            var d_1 = directionDown ? -PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1 : PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1;
+            isListenerBlocked = true;
+            (function myLoop(k) {
+                setTimeout(function () {
+                    ps.delta = start_1 + d_1 * k;
+                    if (k === ROUNDS_1) {
+                        isListenerBlocked = false;
+                    }
+                    if (++k <= ROUNDS_1)
+                        myLoop(k);
+                }, 20);
+            })(1);
+        }
+    };
+    el.addEventListener("click", eventListener);
+    return {
+        eventListener: eventListener,
+        eventType: "click",
+        element: el,
+        delete: function () { return el.removeEventListener("click", eventListener); }
+    };
 };
 exports.addEventListenerToPieSegment = addEventListenerToPieSegment;

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.2261";
+export declare const libraryVersion = "2.1.2267";
 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-01-31T00:00:00";
+var buildStamp = "2022-02-01T00:00:00";
 var result;
 // tslint:disable-next-line:no-var-requires
-exports.libraryVersion = "2.1.2261";
+exports.libraryVersion = "2.1.2267";
 var checkBuildStamp = function (wasmContext) {
     if (result !== undefined)
         return result;

package/README.md

@@ -4,6 +4,8 @@
 
 [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.
 
+Open the link to find out [SciChart.js performance compared to other libraries like Chart.js, Highcharts, etc](https://www.scichart.com/javascript-chart-performance-comparison/).
+
 SciChart is the _**only viable solution for mission-critical data visualization applications**_, where high quality, fast, and feature-rich charts & graphs are a large part of the application.
 
 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.
@@ -14,6 +16,183 @@ We've prepared a short [Getting Started guide here](https://www.scichart.com/get
 
 [![Getting Started with SciChart.js](Sandbox/scichart-js-getting-started-1485.jpg)](https://www.scichart.com/getting-started-scichart-js)
 
+## Quick Start with Browser Bundle
+
+1. **Make sure you downloaded [the Licensing Wizard](https://www.scichart.com/getting-started-scichart-js) and started trial**
+
+    Leave the Licensing Wizard running, it is used to validate licenses.
+
+2. **Create scichart-example.js file with a simple chart**
+
+    ```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"
+        });
+        // Create a chart using the json builder api
+        await SciChart.chartBuilder.buildChart("scichart-root", {
+            series: {
+                type: "LineSeries",
+                options: { stroke: "steelblue" },
+                xyData: {
+                    xValues: [1, 2, 5, 8, 10],
+                    yValues: [3, 1, 7, 5, 8]
+                }
+            }
+        });
+    }
+
+    initSciChart();
+    ```
+
+    See the documentation for [IScichart2Ddefinition](https://www.scichart.com/documentation/js/current/typedoc/interfaces/iscichart2ddefinition.html) for all the options available.
+
+3. **Create html file**
+
+    The file should include **scichart.browser.js** the same version as in the code snippet above, **div element with id "scichart-root"** and deferred **scichart-example.js** script which is executed after the page is loaded.
+
+    ```html
+    <!DOCTYPE html>
+    <html lang="en">
+        <head>
+            <meta charset="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <!-- Include SciChart.js -->
+            <script
+                src="https://cdn.jsdelivr.net/npm/scichart@2.1.2261/_wasm/scichart.browser.js"
+                crossorigin="anonymous"
+            ></script>
+            <script src="scichart-example.js" defer></script>
+            <title>Hello, SciChart.js world!</title>
+        </head>
+        <body>
+            <div id="scichart-root" style="width: 800px; height: 600px;"></div>
+        </body>
+    </html>
+    ```
+
+4. **Host both files** on any web server. As a result you will see a simple line chart. Please note because we are using WebAssembly just opening the HTML file without a server will not work.
+
+Follow [the link](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-browser-global-module) to find source code for this example.
+
+## Quick Start with NPM and Webpack
+
+SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
+
+1. **Make sure you downloaded [the Licensing Wizard](https://www.scichart.com/getting-started-scichart-js) and started trial**
+
+    Leave the Licensing Wizard running, it is used to validate licenses.
+
+2. **Create a new Webpack project** or use an existing one.
+
+    ```shell
+    npm init -y
+    npm install webpack webpack-cli webpack-dev-server copy-webpack-plugin --save-dev
+    ```
+
+    add start script to package.json
+
+    ```
+      "scripts": {
+        "start": "webpack serve"
+      },
+    ```
+
+3. **Install SciChart.js**
+
+    ```shell
+    npm i scichart
+    ```
+
+4. **Add webpack.config.js file**
+
+    Use CopyPlugin to copy wasm and data files and serve them by webpack-dev-server. SciChart.js uses WebAssembly and those files must be loaded.
+
+    ```
+    const path = require('path');
+    const CopyPlugin = require("copy-webpack-plugin");
+
+    module.exports = {
+      mode: 'development',
+      entry: "./src/index.js",
+      performance: {
+        hints: false
+      },
+      output: {
+        path: path.resolve(__dirname, 'build'),
+        filename: 'bundle.js',
+      },
+      plugins: [
+        new CopyPlugin({
+          patterns: [
+            { from: "src/index.html", to: "" },
+            { from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
+            { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
+          ]
+        })
+      ]
+    };
+    ```
+
+5. **Create a simple chart** by putting this into `src/index.js` file
+
+    ```javascript
+    import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
+    import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
+    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" });
+
+    async function initSciChart() {
+        // Create the SciChartSurface in the div 'scichart-root'
+        // The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
+        // instance must be passed to other types that exist on the same surface.
+        const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
+
+        // Create an X,Y Axis and add to the chart
+        const yAxis = new NumericAxis(wasmContext);
+        sciChartSurface.xAxes.add(xAxis);
+        sciChartSurface.yAxes.add(yAxis);
+
+        const dataSeries = new XyDataSeries(wasmContext, {
+            xValues: [1, 2, 5, 8, 10],
+            yValues: [3, 1, 7, 5, 8]
+        });
+        const renderableSeries = new FastLineRenderableSeries(wasmContext, {
+            dataSeries,
+            stroke: "steelblue"
+        });
+        sciChartSurface.renderableSeries.add(renderableSeries);
+    }
+
+    initSciChart();
+    ```
+
+6. **Create src/index.html file**
+
+    ```html
+    <html lang="en-us">
+        <head>
+            <meta charset="utf-8" />
+            <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+            <title>SciChart.js Tutorial 1</title>
+            <script async type="text/javascript" src="bundle.js"></script>
+        </head>
+        <body>
+            <!-- the Div where the SciChartSurface will reside -->
+            <div id="scichart-root" style="width: 800px; height: 600px;"></div>
+        </body>
+    </html>
+    ```
+
+7. **Run it `npm start`**. As a result you will see a simple line chart.
+
+Follow [the link](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-simple-chart) to find source code for this example.
+
 ## Documentation
 
 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.
@@ -26,7 +205,50 @@ An online demo version of scichart.js.examples can be seen at https://demo.scich
 
 # Release Notes
 
-## Version 2 Released
+## Version 2.1 with Major Performance Improvements
+
+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**:
+
+-   Smart Data-point Resampling was implemented. Datapoint resampling ensures the minimum viable data-set is displayed on the screen. Resampling is intended to be visually lossless, and automatic.
+-   Improved raw drawing speed of our underlying graphics engine by over 100%
+-   Added Async Label Creation option with global application or per-chart caching
+-   Optimised data transfers from JavaScript to WebAssembly
+-   Improved chart performance when using RolloverModifier and CursorModifier
+-   Implementation of Auto-detecting data distribution flags in DataSeries (flags dataSeries.isSorted, dataSeries.containsNaN). Specifying these flags gives better performance in big-data scenarios.
+-   Optimizations for Annotation notifyPropertyChange method not to be called if the property has not changed
+-   Display performance warnings in dev environment
+-   Optimisation getXRange() algorithm for unsorted data
+
+**Documentation**:
+
+-   Added Documentation of how to use SciChart.js in vannilla HTML/Js (without npm) using our Browser Bundle served by CDN
+-   Added Documentation for Performance Tips & Tricks
+-   Added Documentation for new Data-point Resampling features
+-   Added Documentation & Examples for new Generic Animations API
+
+**Live demo demo.scichart.com**:
+
+-   Added Generic Animations example to the Demo app
+
+**Other improvements**:
+
+-   Added labels support outside of a Pie Chart
+-   Better error message if wasm cannot be loaded, or the wrong version loaded
+-   Add a property to configure stacked axis length
+-   Allow passing div element reference into SciChartSurface.create to make SciChart.js possible to use in shadow DOM
+-   Improve guard checks for data series creation
+-   Snap RolloverModifier vertical line to data points
+-   Add explanation error message for trial expired on old version
+-   Add AxisRenderer.axisSize property which allows setting axis label width
+-   Add includeAxis property to MouseWheelZoomModifier
+-   Add AxisRenderer.axisThickness
+-   Prevent CursorModifier axis labels to be cut out of the chart
+
+See all the details at [SciChart.js v2.1 release](https://www.scichart.com/scichart-js-v2-1-released/).
+
+## Version 2.0
 
 SciChart.js v2 is a huge release with many new features, improvements and fixes including: