# SciChart.js: Ultra High Performance Realtime 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](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. [![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. # Getting Started > 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 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() { // 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] } } }); } 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 Hello, SciChart.js world!
``` 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"; // 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' // 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 SciChart.js Tutorial 1
``` 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 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 & 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) ## Plot 3D Point Clouds Our 3D Scatter / Bubble and Point-cloud chart types allow you to plot 3-dimensional data with XYZ points. 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. ![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) ## Heatmaps and Spectrograms 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. ![SciChart.js Heatmaps and Spectrograms](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichartjs-javascript-heatmap-chart-spectrogram-ultrasound.jpg) ## Enterprise Grade Support 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. 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