scichart 2.2.2417 → 3.0.0-beta.224

package/README.md

@@ -1,154 +1,76 @@
-# SciChart.js: Ultra High Performance Realtime JavaScript Chart Library
+# SciChart.js: High Performance JavaScript Chart Library
 
-[![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.js](https://www.scichart.com) is a High Performance JavaScript & TypeScript Charting library
+which WebGL and WebAssembly to achieve incredible real-time and big-data performance. Fast and able to draw millions of datapoints in realtime, our charts will never cause your app to slow down again!
 
-[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.
+> SciChart has an extremely configurable and extensible API and is
+> **perfect for scientific, financial, medical, engineering and enterprise applications**,
+> apps with demanding performance requirements or complex and mission critical charting.
 
-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.js 2D 3D hart types](https://www.scichart.com/wp-content/uploads/2022/12/sc-home-collage.png)](https://www.scichart.com/javascript-chart-features)
 
-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.
+## License
 
-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.
-
-[![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!
-
-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.
+> SciChart.js is commercial software with a free trial, but we are planning a free community edition soon!
+>
+> **Licensing Links**
+>
+> -   [Read about our **license terms** here](https://www.scichart.com/scichart-eula)
+> -   [**Start a trial** by following steps here](https://scichart.com/getting-started/scichart-javascript)
+> -   [**Purchase commercial licenses** here](https://store.scichart.com)
+> -   Academic usage, universities and schools qualify for a free for a free license. Read more about this [here](https://www.scichart.com/educational-discount-programme).
+
+## Demo Application
+
+-   We've published a **live demo app** at [demo.scichart.com](https://demo.scichart.com) with 85 examples you can try in browser.
+-   You can clone the repo for the demo app at Github: [github.com/abtsoftware/scichart.js.examples](https://github.com/abtsoftware/scichart.js.examples)
+-   Or, checkout our boilerplates for various popular Js frameworks:
+    -   [React](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-react-scichart) + SciChart boilerplate
+    -   [Vue.js](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-vue-scichart)
+    -   [Angular](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-angular-scichart)
+    -   [NextJs](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-nextjs)
+    -   [Nuxt.js](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-nuxtjs)
+    -   [Electron](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-electron)
 
 # Getting Started
 
-> We've prepared a short [Getting Started guide here](https://www.scichart.com/getting-started-scichart-js).
+> We've prepared a short [Getting Started guide here](https://scichart.com/getting-started/scichart-javascript).
 >
 > 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
+## Useful Links
 
-1. **Make sure you downloaded [the Licensing Wizard](https://www.scichart.com/getting-started-scichart-js) and started trial**
+### Features & benefits
 
-    Leave the Licensing Wizard running, it is used to validate licenses.
+-   Learn about [features of SciChart.js](https://scichart.com/javascript-chart-features) here
 
-2. **Create scichart-example.js file with a simple chart**
+### Onboarding
 
-    ```javascript
-    async function initSciChart() {
-        // 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: {
-                type: "LineSeries",
-                options: { stroke: "steelblue" },
-                xyData: {
-                    xValues: [1, 2, 5, 8, 10],
-                    yValues: [3, 1, 7, 5, 8]
-                }
-            }
-        });
-    }
+-   [Tutorials](https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2001%20-%20Setting%20up%20a%20Project%20with%20SciChart.js.html)
+-   [Getting Started Guide](https://scichart.com/getting-started/scichart-javascript/)
+-   [Documentation](https://www.scichart.com/documentation/js/current/webframe.html)
 
-    initSciChart();
-    ```
+### Support
 
-    See the documentation for [IScichart2Ddefinition](https://www.scichart.com/documentation/js/current/typedoc/interfaces/iscichart2ddefinition.html) for all the options available.
+-   [Community forums](https://scichart.com/questions)
+-   [Stackoverflow tag](https://stackoverflow.com/tags/scichart)
+-   [Contact Us (Technical support or sales)](https://scichart.com/contact-us)
 
-3. **Create html file**
+### Purchasing
 
-    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.2.2401/_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.
+-   [Pricing](https://store.scichart.com)
 
 ## 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**
+1. **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. You can avoid this by using SciChart.SciChartSurface.useWasmFromCDN() as noted below,
-    but in many scenarios it will be important to be able to serve the webassembly files directly.
-
-    ```
-    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
+2 **Create a simple chart** by putting this into `src/index.js` file
 
     ```javascript
     import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
@@ -156,23 +78,22 @@ 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";
 
-    // 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
+    // Call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
+    // Alternative methods for serving wasm from webpack or offline are available on our website
+    SciChartSurface.useWasmFromCDN();
+
+    // Apply your licese key once before startup
+    SciChartSurface.setRuntimeLicenseKey("--YOUR_KEY_HERE--");
 
     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);
+        sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
+        sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
 
+        // Create a line series with some data
         const dataSeries = new XyDataSeries(wasmContext, {
             xValues: [1, 2, 5, 8, 10],
             yValues: [3, 1, 7, 5, 8]
@@ -187,7 +108,7 @@ SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
     initSciChart();
     ```
 
-6. **Create src/index.html file**
+3 **Create src/index.html file**
 
     ```html
     <html lang="en-us">
@@ -204,285 +125,52 @@ SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
     </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 & Tutorials
-
-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)
-
-## Online Demo
-
-An online demo version of scichart.js.examples can be seen at https://demo.scichart.com. Get the source for the demos and examples at https://github.com/abtsoftware/scichart.js.examples
-
-# 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**:
-
--   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
-
-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
--   Data and Style Animations
--   Logarithmic Axis, Inner Axis, Stacked Axis
--   Datapoint and Series Selection
--   Data filters and transformations
--   Retina / High DPI Display / Browser Zoom Support
--   Axis label customization, rotated and multiline text and images
--   Transparent/image backgrounds
--   Loader customization
--   And many more!
-
-See all the details at [SciChart.js v2 release](https://www.scichart.com/scichart-js-v2-beta-released/).
-
-# Our Chart Features
+4 **Run it `npm start`**. As a result you will see a simple line chart.
 
-An up to date list of features can be found at [scichart.com/javascript-chart-features](https://scichart.com/javascript-chart-features).
-
-## JavaScript Chart Types
-
-Supports many 2D & 3D Chart types including:
-
--   [Line Chart](https://demo.scichart.com/javascript-line-chart)
--   [Digital (Step) Line Chart](https://demo.scichart.com/javascript-digital-line-chart)
--   [Area / Mountain Chart](https://demo.scichart.com/javascript-mountain-chart)
--   [Digital (Step) Area / Mountain Chart](https://demo.scichart.com/javascript-mountain-chart)
--   [Column Chart](https://demo.scichart.com/javascript-column-chart)
--   [Stacked Column Chart](https://demo.scichart.com/javascript-stacked-column-chart)
--   [100% Stacked Column Chart](https://demo.scichart.com/javascript-stacked-column-chart)
--   [Scatter Chart](https://demo.scichart.com/javascript-scatter-chart)
--   [Bubble Chart](https://demo.scichart.com/javascript-bubble-chart)
--   [Pie Chart](https://demo.scichart.com/javascript-pie-chart)
--   [Donut Chart](https://demo.scichart.com/javascript-donut-chart)
--   [Candlestick Chart](https://demo.scichart.com/javascript-candlestick-chart)
--   [Ohlc Chart](https://demo.scichart.com/javascript-ohlc-chart)
--   [Band (High low Fill) Chart](https://demo.scichart.com/javascript-band-chart)
--   [Digital (Step) Band Chart](https://demo.scichart.com/javascript-digital-band-chart)
--   [Heatmap or Spectrogram Chart](https://demo.scichart.com/javascript-heatmap-chart)
--   [Fan Chart](https://demo.scichart.com/javascript-fan-chart)
--   [Contours Chart](https://demo.scichart.com/javascript-heatmap-chart-with-contours)
--   [Stacked Mountain Chart](https://demo.scichart.com/javascript-stacked-mountain-chart)
--   [3D Surface Mesh or 3D Area Chart](https://demo.scichart.com/javascript-3d-surface-mesh-chart)
--   [3D Bubble Chart](https://demo.scichart.com/javascript-3d-bubble-chart)
--   [3D Point Cloud Chart](https://demo.scichart.com/javascript-fan-chart)
-
-## Insane Realtime performance
-
-[SciChart's](https://www.scichart.com) Ultra High performance [JavaScript Charts](https://www.scichart.com/javascript-chart-features/) can draw many millions of data-points, allowing you to zoom, pan, or browse big-data sets with ease. [SciChart](https://www.scichart.com) enables next-generation JavaScript &amp; TypeScript chart applications by allowing previously impossible datarates and update-rates. After all, we make 'Impossible projects possible'!
-
-![SciChart.js Chart Performance](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichart-js-performance-loading-millions-datapoints-instantly.jpg)
-
-## Rich Interactive Charts
-
-Drag to zoom, pan, mousewheel zoom, drag axis to zoom, zoom extents or touch behaviour is all supported out of the box.
-
-![SciChart.js Chart Interactivity](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/Scichart-js-rich-interactive-javascript-chart.jpg)
-
-## Chart Animations
-
-SciChart.js supports multiple types of animations to make impressive dashboards and browser applications which will delight your users.
-
-Add series animations which execute when a chart type is shown. Data animations morph or animate from one dataset to another. Style Animations - allow you to animate style (line/fill colour, line thickness) from one set of properties to another.
-
-## Cursors & Tooltips
-
-Our JavaScript Chart library features rich cursors & tooltips out of the box, which are built on our powerful ChartModifier API
-
-Choose from built-in Cursors, Crosshairs, Tooltips on mouse/touch or Rollover (showing vertical lines) as well as Legends. Decide what information is presented in a tooltip. Style tooltips to fit your application.
-
-![SciChart.js Chart Cursors](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/Scichart-js-javascript-chart-tooltips-cursors-rollovers.jpg)
-
-## Annotations & Markers
-
-Our JavaScript Chart library features a powerful Annotations API which allows you to overlay Line, Text, Boxes, Shapes or Watermarks over the chart, at specific X/Y data locations. Annotations update position as you zoom or pan the chart.
-
-![SciChart.js Chart Annotations](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichart-js-javascript-chart-annotations-markers-text-lines-boxes-1.jpg)
-
-## Styling & Theming
-
-SciChart.js features several themes out of the box, including Light Theme and Dark Theme. SciChart supports building Custom Themes either inheriting our own or completely bespoke.
-
-Our charts support transparent background, image background, blurred or glass effect background. Style SciChart to fit your application and delight your users!
-
-![SciChart.js Chart Styling and Theming](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichart-js-theme-javascript-chart-background-image-transparent-background.jpg)
-
-## Many Axis Types and Options
-
-SciChart.js features multiple axis types out of the box, including Numeric Axis, Category Axis (Stock Chart axis) and Logarithmic Axis.
-
-Format labels as Dates, numbers, strings (text) or images. Multi-line text labels and rotated axis labels are supported. Full control over axis label format, label style and label / gridline interval is possible with SciChart.js. The flexibility of our JavaScript charts are second to none.
-
-Unlike other JavaScript Charts that only support a single X and Y axis, SciChart.js supports unlimited, multiple X & Y Axis.
-
-You can scale series independently, have left, right, top or bottom axis. You can scale axis independently.
-
-![SciChart.js Chart Axis](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/javascript-chart-with-multiple-x-axis.jpg)
-
-## Vertical Charts
-
-SciChart.js supports vertical or rotated charts. Set a YAxis alignment to the left, and XAxis alignment to the top, and this will rotate a chart 90 degrees.
-
-![SciChart.js Vertical Charts](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichart-js-vertical-rotated-javascript-chart.jpg)
-
-## Chart Series Selection
-
-SciChart.js features serles selection and hover events on click. We've also packaged a Chart Modifier which will apply selected or hovered series styling to the chart.
-
-Get notified when a user clicks on a chart series. Use this to perform visual-feedback of selection or chart drill-down, making for compelling interactive browser apps.
-
-![SciChart.js Chart Series Selection](https://www.scichart.com/wp-content/uploads/2021/10/scichart-js-javascript-chart-series-selection.jpg%22)
-
-## Chart Data point selection
-
-SciChart.js also supports data-point selection by clicking or dragging a rectangle on the chart.
-
-Get notified when a user clicks a data-point by events and callbacks. Use this to update the selection visual and create an extra layer of interaction to data-driven apps.
-
-![SciChart.js Chart Datapoint Selection](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichart-js-select-datapoints-javascript-chart.jpg)
-
-## Per-Point Colouring
-
-With SciChart.js you can colour data-points based on a rule e.g. would you like all data-points with value > 10 to be coloured red? With our PaletteProvider API you can do this.
-
-Colour volume bars in a stock chart red or green based on up or down, dynamically style data-points or sections of the chart based on thresholds, custom objects and more.
-
-![SciChart.js Chart Per-Point Coloring](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichart-js-color-points-individually-in-javascript.jpg)
-
-## Financial Stock Charts
-
-SciChart.js supports dynamic, real-time Candlestick and Ohlc charts. Connect our charts to real-time exchange data and they can tick & update in real-time. Our performance is second-to-none making SciChart.js perfect for financial stock chart apps.
-
-![SciChart.js Financial Stock Charts](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichart-js-candletick-financial-charts-javascript.jpg)
-
-## Scrolling Overview
-
-Another stock-chart related feature, we've added a Scrolling Overview control to the SciChart.js library. This allows you to see a history of the entire chart data and scroll back & forth instantly. Perfect for financial & stock chart apps!
-
-![SciChart.js Scrolling Overview](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichart-js-scroll-javascript-chart-overview-control.jpg)
-
-## Link Multiple Charts
-
-With SciChart.js you can link multiple charts. Synchronize Zooming and Panning across charts. Have a single tooltip shared across chart surfaces. Create multi-pane stock charts with technical indicators.
-
-Plus, with support for hundreds of WebGL powered charts on a single webpage, you won't get caught short running out of WebGL contexts or experience slow performance with SciChart.
-
-![SciChart.js Link Multiple Charts](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichart-js-multi-panel-stock-chart-javascript.jpg)
-
-## Filters and Data Transforms
-
-SciChart.js features a filters and data-transforms API. Add moving averages, linear trendlines to a chart. Scale and Offset a series. Calculate the ratio between two series.
-
-All SciChart's filters update dynamically as the underlying data updates. What's more, you can create custom filters to transform your data dynamically and on the fly.
-
-![SciChart.js Filters and Data Transforms](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichartjs-javascript-chart-trendline-moving-average-filters-data-transforms.jpg)
-
-## Builder API & JSON Serialization
-
-The Builder API - allows you to create chart definitions with JSON or JavaScript objects. It's never before been easier to create JavaScript charts with SciChart.js. Define your charts on the server, or in a re-usable React component and share them throughout your app.
-
-With SciChart.js every type is JSON Serializable, so you can now create entire chart definitions server-side out of JSON objects and rehydrate them on the client. Save/load chart settings to JSON, allowing rich, dynamic apps with our powerful JavaScript Chart library.
-
-![SciChart.js Builder API and JSON Serialization](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichartjs-builder-api.jpg)
-
-## Accessibility
-
-We've build Accessibility hooks into SciChart.js making it suitable for enterprise-grade applications.
-
-Accessibility features include Voiceover (text to speech for chart parts), Theming, Scaling of fonts with Browser zoom / DPI. color and contrast, and keyboard interaction on the chart.
-
-## Plot 3D Scientific Charts
-
-With SciChart.js you can plot 3D Scientific Charts such as this 3D Surface Mesh (3D Mountain or Area chart), 3D Bubble, Scatter or point-cloud.
-
-With the help of our cross-platform Visual Xccelerator 3D engine you can plot scientific surface mesh charts in real-time with tens of thousands of cells JavaScript and TypeScript applications.
-
-![SciChart.js Plot 3D Scientific Charts](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichartjs-javascript-3d-mountain-surface-chart.jpg)
+> Further reading:
+>
+> -   See the [Getting Started Page](https://scichart.com/getting-started/scichart-javascript/) as well as our [Tutorials](https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2001%20-%20Setting%20up%20a%20Project%20with%20SciChart.js.html) for more information on creating your first chart
 
-## Plot 3D Point Clouds
+## Quick Start with vanilla JS
 
-Our 3D Scatter / Bubble and Point-cloud chart types allow you to plot 3-dimensional data with XYZ points.
+If your environment does not include a bundler like Parcel or Webpack, you can still load SciChart.js using the browser bundle module.
 
-For the first time you can use our powerful JavaScript 3D Chart library to visualise point-cloud outputs from LIDAR, UAV, self-driving car sensors, or plot the relationship between values in scientific, machine learning or statistical data with 3 or 4 (XYZ, Color) or 5 (XYZ, Color, Size) dimensions.
+1.**Create scichart-example.js file with a simple chart**
 
-![SciChart.js Plot 3D Point Clouds](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichartjs-javascript-3d-point-cloud-scatter-bubble-chart-2.jpg)
+```javascript
+async function initSciChart() {
+    // 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();
 
-## Heatmaps and Spectrograms
+    // Apply your licese key once before startup
+    SciChart, SciChartSurface.setRuntimeLicenseKey("--YOUR_KEY_HERE--");
+
+    // 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]
+            }
+        }
+    });
+}
 
-SciChart.js features multiple axis types out of the box, including Numeric Axis, Category Axis (Stock Chart axis) and Logarithmic Axis.
+initSciChart();
+```
 
-Format labels as Dates, numbers, strings (text) or images. Multi-line text labels and rotated axis labels are supported. Full control over axis label format, label style and label / gridline interval is possible with SciChart.js. The flexibility of our JavaScript charts are second to none.
+> See the full [browser bundle tutorial here](https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2001%20-%20Including%20SciChart.js%20in%20an%20HTML%20Page.html)
 
-![SciChart.js Heatmaps and Spectrograms](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichartjs-javascript-heatmap-chart-spectrogram-ultrasound.jpg)
+# Release notes. What's New!
 
-## Enterprise Grade Support
+Check out what's new in SciChart.js at the below pages:
 
-With Open Source JavaScript Charts you may find yourself stuck without technical support if something goes wrong. SciChart provides enterprise grade technical support which has been 5-Star Rated for many years.
+-   [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)
+-   SciChart.js v3.0 Alpha What's New - Coming Soon!
 
-Many competitors have a limit of support, but we provide 1-year unlimited technical support and latest-version updates (subject to fair use policy) to all our customers. Our customers find our tech-support to be a huge time & money saver. If you want to build excellent quality projects, build them quickly and solve problems when they occur, choose SciChart.js
+We release often and if you want to report a bug, request a feature or give general feedback [contact us](https://scichart.com/contact-us)!