scichart 2.0.2126 → 2.0.2144

package/Core/Animations/GenericAnimation.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericAnimation = void 0;
+var guid_1 = require("../../utils/guid");
+var AnimationFiniteStateMachine_1 = require("./AnimationFiniteStateMachine");
+var EasingFunctions_1 = require("./EasingFunctions");
+/**
+ * @summary Defines Animations that can be applied directly to a {@link SciChartSurface} in SciChart's High Performance Real-time
+ * {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
+ * @remarks
+ * When creating the animation, use the options to specify what to update
+ */
+var GenericAnimation = /** @class */ (function () {
+    function GenericAnimation(options) {
+        var _a, _b, _c, _d;
+        /**
+         * The animation delay
+         */
+        this.delay = 0;
+        /**
+         * The animation duration
+         */
+        this.duration = 1000;
+        /**
+         * Sets the animation easing function
+         */
+        this.ease = EasingFunctions_1.easing.linear;
+        this.id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : guid_1.generateGuid();
+        this.delay = (_b = options === null || options === void 0 ? void 0 : options.delay) !== null && _b !== void 0 ? _b : this.delay;
+        this.duration = (_c = options === null || options === void 0 ? void 0 : options.duration) !== null && _c !== void 0 ? _c : this.duration;
+        if ((options === null || options === void 0 ? void 0 : options.ease) && typeof options.ease === "string") {
+            options.ease = EasingFunctions_1.easing[options.ease];
+        }
+        this.ease = (_d = options === null || options === void 0 ? void 0 : options.ease) !== null && _d !== void 0 ? _d : this.ease;
+        this.from = options.from;
+        this.to = options.to;
+        this.onAnimate = options.onAnimate;
+        this.onCompleted = options === null || options === void 0 ? void 0 : options.onCompleted;
+        this.animationFSM = new AnimationFiniteStateMachine_1.AnimationFiniteStateMachine(this);
+    }
+    Object.defineProperty(GenericAnimation.prototype, "isComplete", {
+        get: function () {
+            return this.animationFSM.is([AnimationFiniteStateMachine_1.EAnimationState.Completed]);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** Reset the animation to its initial state.
+     * If reset while running or onCompleted, the animation will remain in the list and run again.
+     */
+    GenericAnimation.prototype.reset = function () {
+        this.animationFSM = new AnimationFiniteStateMachine_1.AnimationFiniteStateMachine(this);
+    };
+    /** Advance the animation according to the time elapsed since the last frame */
+    GenericAnimation.prototype.update = function (timeElapsed) {
+        var transition = this.animationFSM.update(timeElapsed);
+        if ([AnimationFiniteStateMachine_1.EAnimationStateTransition.InitialState_Running, AnimationFiniteStateMachine_1.EAnimationStateTransition.Delayed_Running].includes(transition)) {
+            this.onAnimate(this.from, this.to, 0);
+        }
+        if (this.animationFSM.is([AnimationFiniteStateMachine_1.EAnimationState.Running, AnimationFiniteStateMachine_1.EAnimationState.Completed])) {
+            this.onAnimate(this.from, this.to, this.animationFSM.animationProgress);
+        }
+        if ([AnimationFiniteStateMachine_1.EAnimationStateTransition.Running_Completed, AnimationFiniteStateMachine_1.EAnimationStateTransition.InitialState_Completed].includes(transition)) {
+            if (this.onCompleted)
+                this.onCompleted();
+        }
+    };
+    /** Cancel the animation.  onCompleted will not be called */
+    GenericAnimation.prototype.cancel = function () {
+        this.animationFSM.toCompleted();
+    };
+    return GenericAnimation;
+}());
+exports.GenericAnimation = GenericAnimation;

package/Core/Animations/NumberRangeAnimator.d.ts

@@ -1,6 +1,6 @@
-import { AnimationToken } from "../AnimationToken";
 import { NumberRange } from "../NumberRange";
 import { TEasingFn } from "./EasingFunctions";
+import { GenericAnimation } from "./GenericAnimation";
 /**
  * A class for animating a value of type {@link NumberRange}. Used throughout SciChart to animate
  * {@link AxisCore.visibleRange} when zooming or panning.
@@ -15,6 +15,7 @@ export declare class NumberRangeAnimator {
      * @param onCompleted A callback function which is called when the animation completes
      * @param easingFunction An optional easing function. See {@link IEasingMap} for a list of values
      */
-    static animate(from: NumberRange, to: NumberRange, durationMs: number, onAnimate: (value: NumberRange) => void, onCompleted: () => void, easingFunction?: TEasingFn): AnimationToken;
-    private static interpolate;
+    static animate(from: NumberRange, to: NumberRange, durationMs: number, onAnimate: (value: NumberRange) => void, onCompleted: () => void, easingFunction?: TEasingFn, isLog?: boolean): GenericAnimation<NumberRange>;
+    static interpolate(from: NumberRange, to: NumberRange, interpolationFactor: number): NumberRange;
+    static interpolateLog(from: NumberRange, to: NumberRange, interpolationFactor: number): NumberRange;
 }

package/Core/Animations/NumberRangeAnimator.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberRangeAnimator = void 0;
 var NumberRange_1 = require("../NumberRange");
-var Animator_1 = require("./Animator");
 var EasingFunctions_1 = require("./EasingFunctions");
+var GenericAnimation_1 = require("./GenericAnimation");
 /**
  * A class for animating a value of type {@link NumberRange}. Used throughout SciChart to animate
  * {@link AxisCore.visibleRange} when zooming or panning.
@@ -20,9 +20,23 @@ var NumberRangeAnimator = /** @class */ (function () {
      * @param onCompleted A callback function which is called when the animation completes
      * @param easingFunction An optional easing function. See {@link IEasingMap} for a list of values
      */
-    NumberRangeAnimator.animate = function (from, to, durationMs, onAnimate, onCompleted, easingFunction) {
+    NumberRangeAnimator.animate = function (from, to, durationMs, onAnimate, onCompleted, easingFunction, isLog) {
         if (easingFunction === void 0) { easingFunction = EasingFunctions_1.easing.outExpo; }
-        return Animator_1.animateAny(durationMs, from, to, onAnimate, NumberRangeAnimator.interpolate, onCompleted, easingFunction);
+        if (isLog === void 0) { isLog = false; }
+        var animation = new GenericAnimation_1.GenericAnimation({
+            from: from,
+            to: to,
+            duration: durationMs,
+            onAnimate: function (from, to, progress) {
+                var interpolate = isLog ? NumberRangeAnimator.interpolateLog : NumberRangeAnimator.interpolate;
+                var intermediate = interpolate(from, to, progress);
+                onAnimate(intermediate);
+            },
+            delay: 0,
+            ease: easingFunction,
+            onCompleted: onCompleted
+        });
+        return animation;
     };
     NumberRangeAnimator.interpolate = function (from, to, interpolationFactor) {
         var newMin = (to.min - from.min) * interpolationFactor + from.min;
@@ -30,6 +44,12 @@ var NumberRangeAnimator = /** @class */ (function () {
         var result = new NumberRange_1.NumberRange(newMin, newMax);
         return result;
     };
+    NumberRangeAnimator.interpolateLog = function (from, to, interpolationFactor) {
+        var newMin = Math.pow(to.min / from.min, interpolationFactor) * from.min;
+        var newMax = Math.pow(to.max / from.max, interpolationFactor) * from.max;
+        var result = new NumberRange_1.NumberRange(newMin, newMax);
+        return result;
+    };
     return NumberRangeAnimator;
 }());
 exports.NumberRangeAnimator = NumberRangeAnimator;

package/Core/NumberRange.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberRange = void 0;
-var app_1 = require("../constants/app");
 var isRealNumber_1 = require("../utils/isRealNumber");
 var math_1 = require("../utils/math");
 /**
@@ -57,10 +56,10 @@ var NumberRange = /** @class */ (function () {
             max = temp;
         }
         // If still zero, then expand around the zero line
-        if (Math.abs(max - min) <= app_1.EPSILON && Math.abs(min) <= app_1.EPSILON) {
-            min = -1.0;
-            max = 1.0;
-        }
+        // if (Math.abs(max - min) <= EPSILON && Math.abs(min) <= EPSILON) {
+        //     min = -1.0;
+        //     max = 1.0;
+        // }
         return new NumberRange(min, max);
     };
     NumberRange.prototype.growByLog = function (range, logBase) {
@@ -69,8 +68,8 @@ var NumberRange = /** @class */ (function () {
         var minExp = this.min !== 0 ? math_1.logToBase(Math.abs(this.min), logBase) : 0;
         var maxExp = this.max !== 0 ? math_1.logToBase(Math.abs(this.max), logBase) : 0;
         var expDiff = maxExp - minExp;
-        var minExpDelta = Math.abs(expDiff * range.min);
-        var maxExpDelta = Math.abs(expDiff * range.max);
+        var minExpDelta = expDiff * range.min;
+        var maxExpDelta = expDiff * range.max;
         var newMin = mult * (this.min !== 0 ? Math.pow(logBase, minExp - minExpDelta) : 0);
         var newMax = mult * (this.max !== 0 ? Math.pow(logBase, maxExp + maxExpDelta) : 0);
         if (newMin > newMax) {

package/README.md

@@ -2,7 +2,29 @@
 
 [![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](https://www.scichart.com) has the _**only viable solution for mission-critical charting applications**_, with our ultra-fast 2D/3D graphics technology codenamed _Visual Xccelerator®_ now ported to JavaScript/TypeScript using WebGL and WebAssembly. We have cross-platform technology and provide solutions to enterprise around the world for Windows, Mobile, macOS and now JavaScript apps.
+[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 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.
+
+# Getting Started
+
+We've prepared a short [Getting Started guide here](https://www.scichart.com/getting-started-scichart-js).
+
+[![Getting Started with SciChart.js](Sandbox/scichart-js-getting-started-1485.jpg)](https://www.scichart.com/getting-started-scichart-js)
+
+## 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.
+
+[![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 Released
 
@@ -21,22 +43,187 @@ SciChart.js v2 is a huge release with many new features, improvements and fixes
 
 See all the details at [SciChart.js v2 release](https://www.scichart.com/scichart-js-v2-beta-released/).
 
-## Insane performance
+# 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'!
 
-## Online Demo
+![SciChart.js Chart Performance](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/scichart-js-performance-loading-millions-datapoints-instantly.jpg)
 
-An online demo version of scichart.js.examples can be seen at https://demo.scichart.com. Get the source for the demos at https://github.com/abtsoftware/scichart.js.examples
+## Rich Interactive Charts
 
-## Getting Started
+Drag to zoom, pan, mousewheel zoom, drag axis to zoom, zoom extents or touch behaviour is all supported out of the box.
 
-Open this page to [get started with SciChart.js](https://www.scichart.com/getting-started-scichart-js).
+![SciChart.js Chart Interactivity](https://abtsoftware-wpengine.netdna-ssl.com/wp-content/uploads/2021/10/Scichart-js-rich-interactive-javascript-chart.jpg)
 
-[![Getting Started with SciChart.js](Sandbox/scichart-js-getting-started-1485.jpg)](https://www.scichart.com/getting-started-scichart-js)
+## Chart Animations
 
-## Documentation
+SciChart.js supports multiple types of animations to make impressive dashboards and browser applications which will delight your users.
 
-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.
+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.
 
-[![JavaScript Chart Documentation](Sandbox/scichart-js-javascript-chart-documentation.PNG)](https://www.scichart.com/javascript-chart-documentation)
+## 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