SciChart.js

https://www.scichart.com/documentation/js/v5/
Admin
SciChart.js is a high-performance real-time 2D and 3D JavaScript charting library designed for...
Tokens:2,851,500
Snippets:13,352
Trust Score:9.9
Update:5 months ago
Show doc for...
Tokens:
Raw
### SurfaceMeshRenderableSeries3D Example Usage

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/surfacemeshrenderableseries3d.html

A comprehensive code example demonstrating how to initialize and configure a SurfaceMeshRenderableSeries3D with data, color mapping, and various visual properties.

```APIDOC
```javascript
// Create an empty 2D array using the helper function zeroArray2D
const heightMapArray: number[][] = zeroArray2D([height, width]);
// todo: fill the zValues 2d array with values

// Create a UniformGridDataSeries3D passing in height values
const dataSeries = new UniformGridDataSeries3D(wasmContext, {
      yValues: heightmapArray,
      xStep: 1,
      zStep: 1,
      dataSeriesName: "Uniform Surface Mesh"
  });

// Create a color map with gradient colors
const colorMap = new GradientColorPalette(wasmContext, {
       gradientStops: [
           { offset: 1, color: "#8B0000" },
           { offset: 0.9, color: "#FF0000" },
           { offset: 0.7, color: "#FF0000" },
           { offset: 0.5, color: "#ADFF2F" },
           { offset: 0.3, color: "#00FFFF" },
           { offset: 0.1, color: "#0000FF" },
           { offset: 0, color: "#1D2C6B" }
       ]
   });

// Create a SurfaceMeshRenderableSeries3D
const series = new SurfaceMeshRenderableSeries3D(wasmContext, {
       dataSeries,
       minimum: 0,
       maximum: 0.5,
       opacity: 0.9,
       cellHardnessFactor: 1.0,
       shininess: 0,
       lightingFactor: 0.8,
       highlight: 1.0,
       stroke: "rgba(24,139,34,0.5)",
       strokeThickness: 2.0,
       contourStroke: "rgba(24,139,34,0.5)",
       contourInterval: 2,
       contourOffset: 0,
       contourStrokeThickness: 2,
       drawSkirt: false,
       drawMeshAs: EDrawMeshAs.SOLID_WIREFRAME,
       meshColorPalette: colorMap,
       isVisible: true
   });

// Add the Surface Mesh to the chart
sciChart3DSurface.renderableSeries.add(series);
```
```

--------------------------------

### Full Stacked Column Hit Test Example (TypeScript)

Source: https://www.scichart.com/documentation/js/v4/2d-charts/chart-types/hit-test-api/stacked-column-renderable-series

Demonstrates creating and rendering stacked column series with hit testing capabilities. Includes data series, renderable series configuration, and axis setup.

```typescript
import { SciChartSurface, NumericAxis, DpiHelper, CustomAnnotation, EHorizontalAnchorPoint, EVerticalAnchorPoint, NumberRange, XyDataSeries, StackedColumnRenderableSeries, StackedColumnCollection, HitTestInfo } from "scichart";

export async function hitTestStackedColumnTs(divId) {
    const xValues = [1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003];
    const porkData = [10, 13, 7, 16, 4, 6, 20, 14, 16, 10, 24, 11];
    const vealData = [12, 17, 21, 15, 19, 18, 13, 21, 22, 20, 5, 10];
    const tomatoesData = [7, 30, 27, 24, 21, 15, 17, 26, 22, 28, 21, 22];
    const cucumberData = [16, 10, 9, 8, 22, 14, 12, 27, 25, 23, 17, 17];
    const pepperData = [7, 24, 21, 11, 19, 17, 14, 27, 26, 22, 28, 16];
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divId);
    const xAxis = new NumericAxis(wasmContext);
    xAxis.labelProvider.precision = 0;
    sciChartSurface.xAxes.add(xAxis);
    const yAxis = new NumericAxis(wasmContext);
    yAxis.growBy = new NumberRange(0, 0.1);
    sciChartSurface.yAxes.add(yAxis);
    const dataSeries1 = new XyDataSeries(wasmContext, { xValues, yValues: porkData, dataSeriesName: 'Pork' });
    const dataSeries2 = new XyDataSeries(wasmContext, { xValues, yValues: vealData, dataSeriesName: 'Veal' });
    const dataSeries3 = new XyDataSeries(wasmContext, { xValues, yValues: tomatoesData, dataSeriesName: 'Tomato' });
    const dataSeries4 = new XyDataSeries(wasmContext, { xValues, yValues: cucumberData, dataSeriesName: 'Cucumber' });
    const dataSeries5 = new XyDataSeries(wasmContext, { xValues, yValues: pepperData, dataSeriesName: 'Pepper' });
    const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries1.fill = '#226Fb7';
    rendSeries1.stroke = 'black';
    rendSeries1.strokeThickness = 1;
    rendSeries1.dataSeries = dataSeries1;
    rendSeries1.rolloverModifierProps.markerColor = '#19548b';
    rendSeries1.rolloverModifierProps.tooltipColor = '#226Fb7';
    rendSeries1.rolloverModifierProps.tooltipTextColor = '#fff';
    rendSeries1.stackedGroupId = 'Meat';
    const rendSeries2 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries2.fill = '#ff9a2e';
    rendSeries2.dataSeries = dataSeries2;
    rendSeries2.rolloverModifierProps.markerColor = '#db8428';
    rendSeries2.rolloverModifierProps.tooltipColor = '#ff9a2e';
    rendSeries2.rolloverModifierProps.tooltipTextColor = '#000';
    rendSeries2.stackedGroupId = 'Meat';
    const rendSeries3 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries3.fill = '#dc443f';
    rendSeries3.dataSeries = dataSeries3;
    rendSeries3.rolloverModifierProps.markerColor = '#b83735';
    rendSeries3.rolloverModifierProps.tooltipColor = '#dc443f';
    rendSeries3.rolloverModifierProps.tooltipTextColor = '#fff';
    rendSeries3.stackedGroupId = 'Vegetables';
    const rendSeries4 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries4.fill = '#aad34f';
    rendSeries4.dataSeries = dataSeries4;
    rendSeries4.rolloverModifierProps.markerColor = '#87a73e';
    rendSeries4.rolloverModifierProps.tooltipColor = '#aad34f';
    rendSeries4.rolloverModifierProps.tooltipTextColor = '#000';
    rendSeries4.stackedGroupId = 'Vegetables';
    const rendSeries5 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries5.fill = '#8562b4';
    rendSeries5.dataSeries = dataSeries5;
    rendSeries5.rolloverModifierProps.markerColor = '#715195';
    rendSeries5.rolloverModifierProps.tooltipColor = '#8562b4';
    rendSeries5.rolloverModifierProps.tooltipTextColor = '#fff';
    rendSeries5.stackedGroupId = 'Vegetables';
    const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
    verticallyStackedColumnCollection.dataPointWidth = 0.8;
    verticallyStackedColumnCollection.add(rendSeries3, rendSeries4, rendSeries5, rendSeries1, rendSeries2);
    sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);
    // Add an SVG annotation to display the mouse click
    const svgAnnotation = new CustomAnnotation({
        svgString: `<svg width="8" height="8"><circle cx="50%" cy="50%" r="4" fill="#FF0000"/></svg>`, 
        isHidden: true,

```

--------------------------------

### StackedMountainCollection Example Usage

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/stackedmountaincollection.html

Example demonstrating how to create and configure a StackedMountainCollection.

```APIDOC
## Example Usage

```javascript
// Assume wasmContext is initialized SciChart.js context
// Assume sciChartSurface is an initialized SciChartSurface instance

const stackedMountain0 = new StackedMountainRenderableSeries(wasmContext);
// ... configure mountain 0, including set dataSeries

const stackedMountain1 = new StackedMountainRenderableSeries(wasmContext);
// ... configure mountain 1, including set dataSeries

const stackedMountain2 = new StackedMountainRenderableSeries(wasmContext);
// ... configure mountain 2, including set dataSeries

const stackedMountainCollection = new StackedMountainCollection(wasmContext);
stackedMountainCollection.add(stackedMountain0, stackedMountain1, stackedMountain2);

sciChartSurface.renderableSeries.add(stackedMountainCollection);
```

### Remarks
Multiple StackedMountainRenderableSeries are required to create a stacked mountain chart type in SciChart. These are grouped with a StackedMountainCollection, which implements IRenderableSeries and may be added directly to a SciChartSurface.renderableSeries collection.
```

--------------------------------

### UniformHeatmapRenderableSeries Initialization and Usage

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/uniformheatmaprenderableseries.html

Demonstrates how to initialize and use the UniformHeatmapRenderableSeries with data and a color map.

```APIDOC
## UniformHeatmapRenderableSeries

### Description
A JavaScript Heatmap chart type rendering a 2-dimensional array of data as color values between X,Y bounds in SciChart's High Performance Real-time JavaScript Chart Library.

Heatmaps are 2-dimensional arrays of data, rendered as a color-map on the chart. The UniformHeatmapRenderableSeries assumes the cells are equal size, and spaced along the X,Y axis according to properties on the UniformHeatmapDataSeries.

### Method
N/A (Class Definition)

### Endpoint
N/A (Class Definition)

### Parameters
N/A (Class Definition)

### Request Example
```javascript
// Create an empty 2D array using the helper function zeroArray2D
const zValues: number[][] = zeroArray2D([height, width]);
// todo: fill the zValues 2d array with values

// Create a UniformHeatmapDataSeries passing in zValues
const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, 0, 1, 0, 1, zValues);

// Create a Heatmap RenderableSeries with the color map. ColorMap.minimum/maximum defines the values in
// HeatmapDataSeries which correspond to gradient stops at 0..1
const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
       dataSeries: heatmapDataSeries,
       colorMap: new HeatmapColorMap({
           minimum: 0,
          maximum: 200,
          gradientStops: [
              { offset: 0, color: "#00008B" },
              { offset: 0.2, color: "#6495ED" },
              { offset: 0.4, color: "#006400" },
              { offset: 0.6, color: "#7FFF00" },
              { offset: 0.8, color: "#FFFF00" },
              { offset: 1.0, color: "#FF0000" }
          ]
      })
  });

// Add heatmap to the chart
sciChartSurface.renderableSeries.add(heatmapSeries);
```

### Response
N/A (Class Definition)

### Response Example
N/A (Class Definition)
```

--------------------------------

### Example package.json Configuration

Source: https://www.scichart.com/documentation/js/v4/get-started/tutorials-react/tutorial-01-setting-up-project-with-scichart-react

This is an example of a package.json file after installing all necessary dependencies and setting up scripts for building and starting the development server.

```json
{
    "name": "react-scichart-demo",
    "version": "1.0.0",
    "description": "First Tutorial with scichart-react",
    "main": "index.jsx",
    "scripts":
    {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "start": "webpack-dev-server"
    },
    "author": "",
    "license": "MIT",
    "devDependencies":
    {
        "@babel/core": "^7.21.4",
        "@babel/preset-react": "^7.18.6",
        "babel-loader": "^9.1.2",
        "copy-webpack-plugin": "^13.0.0",
        "prettier": "^2.1.2",
        "webpack": "^5.99.9",
        "webpack-cli": "^6.0.1",
        "webpack-dev-server": "^5.2.2"
    },
    "dependencies":
    {
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "scichart": "^4.0.0-beta.734",
        "scichart-react": "^0.2.0-beta.2"
    }
}

```

--------------------------------

### OhlcSeriesHitTestProvider Constructor

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/ohlcserieshittestprovider.html

Initializes a new instance of the OhlcSeriesHitTestProvider.

```APIDOC
## new OhlcSeriesHitTestProvider(parentSeries: BaseOhlcRenderableSeries, wasmContext: TSciChart): OhlcSeriesHitTestProvider

### Description
Creates an instance of the BaseHitTestProvider.

### Parameters
#### parentSeries: BaseOhlcRenderableSeries
the parent RenderableSeries that this Hit-Test provider is attached to
#### wasmContext: TSciChart
the SciChart WebAssembly Context containing native methods and access to our WebGL2 WebAssembly Drawing Engine

### Returns
OhlcSeriesHitTestProvider
```

--------------------------------

### yStartAngle Property

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/polarzoomextentsmodifier.html

Gets or sets the start angle for the Y axis. By default, the initial start angle is used.

```APIDOC
## yStartAngle

### Description
Gets or sets start angle for Y axis. By default the initial start angle is used.

### Type
number

### Example
```javascript
yStartAngle: number
```
```

--------------------------------

### xStartAngle Property

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/polarzoomextentsmodifier.html

Gets or sets the start angle for the X axis. By default, the initial start angle is used.

```APIDOC
## xStartAngle

### Description
Gets or sets start angle for X axis. By default the initial start angle is used.

### Type
number

### Example
```javascript
xStartAngle: number
```
```

--------------------------------

### create

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/textannotation.html

Initializes a new instance with specified coordinate calculators and SVG transformation values.

```APIDOC
## Protected create

### Description
inheritdoc

### Method
Protected

### Endpoint
create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void

### Parameters
#### Path Parameters
- **xCalc** (CoordinateCalculatorBase) - Required
- **yCalc** (CoordinateCalculatorBase) - Required
- **xCoordSvgTrans** (number) - Required
- **yCoordSvgTrans** (number) - Required

### Returns void
```

--------------------------------

### LineSeriesHitTestProvider Constructor

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/lineserieshittestprovider.html

Initializes a new instance of the LineSeriesHitTestProvider class.

```APIDOC
## constructor LineSeriesHitTestProvider

### Description
Creates an instance of the BaseHitTestProvider.

### Parameters
#### parentSeries: BaseLineRenderableSeries
the parent RenderableSeries that this Hit-Test provider is attached to
    
#### wasmContext: TSciChart
the SciChart WebAssembly Context containing native methods and access to our WebGL2 WebAssembly Drawing Engine

### Returns
LineSeriesHitTestProvider
```

--------------------------------

### startAngleDegrees

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/polaraxisbase.html

Gets or sets the start angle in degrees for an angular axis.

```APIDOC
## GET startAngleDegrees

### Description
Gets the start angle in degrees.

### Method
GET

### Endpoint
/websites/scichart_js_v4

### Response
#### Success Response (200)
- **startAngleDegrees** (number | undefined) - The start angle in degrees.

## SET startAngleDegrees

### Description
Sets the start angle in degrees.

### Method
SET

### Endpoint
/websites/scichart_js_v4

### Parameters
#### Path Parameters
- **value** (number | undefined) - The start angle in degrees.

### Response
#### Success Response (200)
- **void**
```

--------------------------------

### resetStartAngles Property

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/polarzoomextentsmodifier.html

Gets or sets a flag to reset start angles for X and Y axes. Defaults to true.

```APIDOC
## resetStartAngles

### Description
Get or sets flag to reset start angles for X and Y axes.

### Type
boolean

### Default value
true

### Example
```javascript
resetStartAngles: boolean = true
```
```

--------------------------------

### create

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/overviewcustomresizableannotation.html

Initializes a new instance with specified coordinate calculators and SVG translation values.

```APIDOC
## Protected create

### Description
Initializes a new instance with specified coordinate calculators and SVG translation values.

### Method
Protected

### Endpoint
create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void

### Parameters
#### Path Parameters
- **xCalc** (CoordinateCalculatorBase) - Required
- **yCalc** (CoordinateCalculatorBase) - Required
- **xCoordSvgTrans** (number) - Required
- **yCoordSvgTrans** (number) - Required

### Returns
void
```

--------------------------------

### package.json Configuration

Source: https://www.scichart.com/documentation/js/v4/get-started/tutorials-js-npm-webpack/tutorial-01-setting-up-npm-project-with-scichart-js

This is an example of a package.json file. It defines project metadata, scripts for building and starting the development server, and lists dependencies and devDependencies.

```json
{
    "name": "tutorial1",
    "version": "1.0.0",
    "description": "Tutorial with SciChart.js",
    "main": "index.js",
    "scripts": {
        "build": "webpack",
        "start": "webpack-dev-server"
    },
    "author": "",
    "license": "MIT",
    "dependencies": {
        "scichart": "^4.0.0-beta.734"
    },
    "devDependencies": {
        "copy-webpack-plugin": "^13.0.0",
        "webpack": "^5.99.9",
        "webpack-cli": "^6.0.1",
        "webpack-dev-server": "^5.2.2"
    }
}

```

--------------------------------

### MountainSeriesHitTestProvider Constructor

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/mountainserieshittestprovider.html

Initializes a new instance of the MountainSeriesHitTestProvider class.

```APIDOC
## constructor MountainSeriesHitTestProvider

### Description
Creates an instance of the BaseHitTestProvider.

### Parameters
- **parentSeries** (BaseMountainRenderableSeries) - The parent RenderableSeries that this Hit-Test provider is attached to.
- **wasmContext** (TSciChart) - The SciChart WebAssembly Context containing native methods and access to our WebGL2 WebAssembly Drawing Engine.

### Returns
MountainSeriesHitTestProvider
```

--------------------------------

### Data Rendering Utilities

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/ohlcseriesdrawingprovider.html

Utility functions for managing data rendering, including getting start index and count, and selecting X/Y values.

```APIDOC
## getStartAndCount

### Description
Returns the startIndex and count to be passed to the native drawing provider. If renderPassData exists and contains an indexRange, this will be used, otherwise the full size of the xValues will be used.

### Method
(Implicitly a method within a class, signature provided)

### Endpoint
N/A (Client-side JavaScript function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Example usage (assuming renderPassData and xValues are defined)
const result = instance.getStartAndCount(renderPassData, xValues);
console.log(result.startIndex, result.count);
```

### Response
#### Success Response (200)
- **count** (number) - The number of data points to render.
- **startIndex** (number) - The starting index of the data points to render.

#### Response Example
```json
{
  "startIndex": 0,
  "count": 100
}
```
```

```APIDOC
## xSelector

### Description
Selects the X values from a given point series.

### Method
(Implicitly a method within a class, signature provided)

### Endpoint
N/A (Client-side JavaScript function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Example usage (assuming pointSeries is defined)
const xValues = instance.xSelector(pointSeries);
```

### Response
#### Success Response (200)
- **SCRTDoubleVector** - A vector containing the X values.

#### Response Example
```json
// Represents a SCRTDoubleVector, actual representation may vary
[1.0, 2.5, 3.0, ...]
```
```

```APIDOC
## ySelector

### Description
Selects the Y values from a given point series.

### Method
(Implicitly a method within a class, signature provided)

### Endpoint
N/A (Client-side JavaScript function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Example usage (assuming pointSeries is defined)
const yValues = instance.ySelector(pointSeries);
```

### Response
#### Success Response (200)
- **SCRTDoubleVector** - A vector containing the Y values.

#### Response Example
```json
// Represents a SCRTDoubleVector, actual representation may vary
[10.5, 12.2, 15.0, ...]
```
```

--------------------------------

### LineSegmentSeriesHitTestProvider Constructor

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/linesegmentserieshittestprovider.html

Initializes a new instance of the LineSegmentSeriesHitTestProvider class.

```APIDOC
## constructor LineSegmentSeriesHitTestProvider

### Description
Creates an instance of the BaseHitTestProvider.

### Parameters
- **parentSeries** (BaseLineRenderableSeries) - The parent RenderableSeries that this Hit-Test provider is attached to.
- **wasmContext** (TSciChart) - The SciChart WebAssembly Context containing native methods and access to our WebGL2 WebAssembly Drawing Engine.

### Returns
LineSegmentSeriesHitTestProvider
```

--------------------------------

### scaleGradientToYRange API

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/polarbandrenderableseries.html

Gets or sets the flag to scale gradient along the Y data-range. For Y Radial axis if False gradient starts at the circle center and ends at the the circle edge. However, if True the gradient starts at min Y value and ends and max Y value for every arc segment.

```APIDOC
## scaleGradientToYRange

### Description
Gets or sets the flag to scale gradient along the Y data-range. For Y Radial axis if False gradient starts at the circle center and ends at the circle edge. However, if True the gradient starts at min Y value and ends and max Y value for every arc segment.

### Method
GET / SET

### Endpoint
N/A (Property)

### Parameters
#### Set Parameters
- **value** (boolean) - Required - The boolean value to set for scaleGradientToYRange.

### Response
#### Success Response (200)
- **value** (boolean) - The current value of scaleGradientToYRange.

#### Response Example
```json
{
  "value": true
}
```
```

--------------------------------

### TextSeriesHitTestProvider Constructor

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/textserieshittestprovider.html

Initializes a new instance of the TextSeriesHitTestProvider class.

```APIDOC
## TextSeriesHitTestProvider constructor

### Description
Creates an instance of the BaseHitTestProvider.

### Method
constructor

### Parameters
#### Path Parameters
- **parentSeries** (BaseRenderableSeries) - Required - The parent RenderableSeries that this Hit-Test provider is attached to.
- **wasmContext** (TSciChart) - Required - The SciChart WebAssembly Context containing native methods and access to our WebGL2 WebAssembly Drawing Engine.

### Returns
TextSeriesHitTestProvider
```

--------------------------------

### create

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/scichartsurface.html

Creates a SciChartSurface and WebAssembly Context.

```APIDOC
## create

### Description
Creates a SciChartSurface and WebAssembly Context to occupy the div by element ID in your DOM. This method is async and must be awaited.

### Method
POST

### Endpoint
/websites/scichart_js_v4/create

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **divElement** (string | HTMLDivElement) - Required - The Div Element ID or reference where the SciChartSurface will reside.
- **options** (I2DSurfaceOptions) - Optional - Optional parameters for chart creation. See I2DSurfaceOptions for more details.

### Request Example
```json
{
  "divElement": "myChartDiv",
  "options": {
    "surfaceType": "2D"
  }
}
```

### Response
#### Success Response (200)
- **TWebAssemblyChart** - A promise that resolves to the created WebAssemblyChart instance.

#### Response Example
```json
{
  "chartInstance": "<chart_instance_id>"
}
```
```

--------------------------------

### Point Count Threshold

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/stackedcolumnseriesdatalabelprovider.html

Gets or sets the number of points below which drawing will start. This can be used instead of pointGapThreshold when data is unevenly spaced or has large y variation. Default is Infinity.

```APIDOC
## Point Count Threshold

### Description
Gets or sets the number of points below which drawing will start. This can be used instead of pointGapThreshold when data is unevenly spaced or has large y variation. Default Infinity.

### Method
GET

### Returns
number

### Description
Gets or sets the number of points below which drawing will start. This can be used instead of pointGapThreshold when data is unevenly spaced or has large y variation. Default Infinity.

### Method
SET

### Parameters
#### value: number
Gets or sets the number of points below which drawing will start.

### Returns
void
```

--------------------------------

### Constructor: XyzSeriesInfo3D

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/xyzseriesinfo3d.html

Initializes a new instance of the XyzSeriesInfo3D class.

```APIDOC
## constructor new XyzSeriesInfo3D

### Description
Initializes a new instance of the XyzSeriesInfo3D class.

### Parameters
* **series** (IRenderableSeries3D) - The associated renderable series.
* **hitTestInfo** (HitTestInfo3D) - The hit test information.

### Returns
XyzSeriesInfo3D - A new instance of XyzSeriesInfo3D.
```

--------------------------------

### Add a Mountain Series to SciChartSurface

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/fastmountainrenderableseries.html

To add a mountain series, declare both a RenderableSeries and a DataSeries. This example shows the basic setup for creating and appending a mountain series to a SciChartSurface.

```javascript
const sciChartSurface: SciChartSurface;
const wasmContext: TSciChart;
// Create and fill the dataseries
const dataSeries = new XyDataSeries(wasmContext);
dataSeries.append(1,2);
dataSeries.append(1,2);
// Create the renderableSeries
const mountainSeries = new FastMountainRenderableSeries(wasmContext);
mountainSeries.dataSeries = dataSeries;
// append to the SciChartSurface
sciChartSurface.renderableSeries.add(mountainSeries);
```

--------------------------------

### Full Example: Hit-Testing a Band Series

Source: https://www.scichart.com/documentation/js/v4/2d-charts/chart-types/hit-test-api/fast-band-renderable-series

Demonstrates creating a SciChartSurface, adding a FastBandRenderableSeries, and handling mouse events to perform hit-testing. Requires SciChartSurface, NumericAxis, XyyDataSeries, FastBandRenderableSeries, CustomAnnotation, and DpiHelper.

```typescript
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divId);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisAlignment: EAxisAlignment.Top }));
sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, { axisAlignment: EAxisAlignment.Right, growBy: new NumberRange(0.4, 0.4) })
);
const dataSeries = new XyyDataSeries(wasmContext);
const POINTS = 1000;
const STEP = (3 * Math.PI) / POINTS;
for (let i = 0; i <= 1000; i++) {
    const k = 1 - i / 2000;
    dataSeries.append(i, Math.sin(i * STEP) * k * 0.7, Math.cos(i * STEP) * k);
}
const bandSeries = new FastBandRenderableSeries(wasmContext, {
    dataSeries,
    strokeThickness: 2
});
sciChartSurface.renderableSeries.add(bandSeries);
bandSeries.fill = "#279B2733";
bandSeries.fillY1 = "#FF191933";
bandSeries.stroke = "#FF1919FF";
bandSeries.strokeY1 = "#279B27FF";
// Add an SVG annotation to display the mouse click
const svgAnnotation = new CustomAnnotation({
    svgString: `<svg width="8" height="8"><circle cx="50%" cy="50%" r="4" fill="#FF0000"/></svg>`,
    isHidden: true,
    horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
    verticalAnchorPoint: EVerticalAnchorPoint.Center
});
sciChartSurface.annotations.add(svgAnnotation);
sciChartSurface.domCanvas2D.addEventListener("mousedown", (mouseEvent: MouseEvent) => {
    const mouseClickX = mouseEvent.offsetX;
    const mouseClickY = mouseEvent.offsetY;
    console.log("mouseClickX", mouseClickX, "mouseClickY", mouseClickY);
    const premultipliedX = mouseEvent.offsetX * DpiHelper.PIXEL_RATIO;
    const premultipliedY = mouseEvent.offsetY * DpiHelper.PIXEL_RATIO;
    console.log("premultipliedX", premultipliedX, "premultipliedY", premultipliedY);
    // IHitTestProvider.hitTest
    const hitTestInfo = bandSeries.hitTestProvider.hitTest(premultipliedX, premultipliedY);
    svgAnnotation.x1 = hitTestInfo.hitTestPointValues.x;
    svgAnnotation.y1 = hitTestInfo.hitTestPointValues.y;
    svgAnnotation.isHidden = false;
    const resultDiv = document.getElementById("result");
    resultDiv.innerText = `isHit = ${hitTestInfo.isHit}`;
    console.log("hitTestInfo", hitTestInfo);
});
```

--------------------------------

### Hit Test Column Series Example (TypeScript)

Source: https://www.scichart.com/documentation/js/v4/2d-charts/chart-types/hit-test-api/fast-column-renderable-series

This example demonstrates how to use the hitTest method on a FastColumnRenderableSeries. It sets up a SciChartSurface with a column series and adds a mouse event listener to detect clicks. When a click occurs, it calls hitTestProvider.hitTest to get hit test information and updates an annotation and a result div.

```typescript
import {SciChartSurface, NumericAxis, NumberRange, DpiHelper, CustomAnnotation, EHorizontalAnchorPoint, XyDataSeries, FastColumnRenderableSeries} from "scichart";  
  
export async function hitTestColumnTs(divId) {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divId);  
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));  
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));  
    // Column series  
    const xColumnValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];  
    const yColumnValues = [0, 0.2, 1, 2.0, 2.5, 1.9, 1.9, 1.5, 1.2];  
    const columnSeries = new FastColumnRenderableSeries(wasmContext, {  
        fill: 'rgba(255,255,255,0.9)',  
        dataPointWidth: 0.5,  
        dataSeries: new XyDataSeries(wasmContext, {  
            xValues: xColumnValues,  
            yValues: yColumnValues  
        })  
    });  
    sciChartSurface.renderableSeries.add(columnSeries);  
    // Add an SVG annotation to display the mouse click  
    const svgAnnotation = new CustomAnnotation({  
        svgString: `<svg width="8" height="8"><circle cx="50%" cy="50%" r="4" fill="#FF0000"/></svg>`,  
        isHidden: true,  
        horizontalAnchorPoint: EHorizontalAnchorPoint.Center,  
        verticalAnchorPoint: EVerticalAnchorPoint.Center  
    });  
    sciChartSurface.annotations.add(svgAnnotation);  
    sciChartSurface.domCanvas2D.addEventListener('mousedown', (mouseEvent) => {  
        const mouseClickX = mouseEvent.offsetX;  
        const mouseClickY = mouseEvent.offsetY;  
        console.log('mouseClickX', mouseClickX, 'mouseClickY', mouseClickY);  
        const premultipliedX = mouseEvent.offsetX * DpiHelper.PIXEL_RATIO;  
        const premultipliedY = mouseEvent.offsetY * DpiHelper.PIXEL_RATIO;  
        console.log('premultipliedX', premultipliedX, 'premultipliedY', premultipliedY);  
        // IHitTestProvider.hitTest  
        const hitTestInfo = columnSeries.hitTestProvider.hitTest(premultipliedX, premultipliedY);  
        svgAnnotation.x1 = hitTestInfo.hitTestPointValues.x;  
        svgAnnotation.y1 = hitTestInfo.hitTestPointValues.y;  
        svgAnnotation.isHidden = false;  
        const resultDiv = document.getElementById('result');  
        resultDiv.innerText = `isHit = ${hitTestInfo.isHit}`;  
        console.log('hitTestInfo', hitTestInfo);  
    });  
}
```

```typescript
import {SciChartSurface, NumericAxis, NumberRange, DpiHelper, CustomAnnotation, EHorizontalAnchorPoint, XyDataSeries, FastColumnRenderableSeries} from "scichart";  
  
export async function hitTestColumnTs(divId: string) {  
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divId);  
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));  
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));  
    // Column series  
    const xColumnValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];  
    const yColumnValues = [0, 0.2, 1, 2.0, 2.5, 1.9, 1.9, 1.5, 1.2];  
    const columnSeries = new FastColumnRenderableSeries(wasmContext, {  
        fill: 'rgba(255,255,255,0.9)',  
        dataPointWidth: 0.5,  
        dataSeries: new XyDataSeries(wasmContext, {  
            xValues: xColumnValues,  
            yValues: yColumnValues  
        })  
    });  
    sciChartSurface.renderableSeries.add(columnSeries);  
    // Add an SVG annotation to display the mouse click  
    const svgAnnotation = new CustomAnnotation({  
        svgString: `<svg width="8" height="8"><circle cx="50%" cy="50%" r="4" fill="#FF0000"/></svg>`,  
        isHidden: true,  
        horizontalAnchorPoint: EHorizontalAnchorPoint.Center,  
        verticalAnchorPoint: EVerticalAnchorPoint.Center  
    });  
    sciChartSurface.annotations.add(svgAnnotation);  
    sciChartSurface.domCanvas2D.addEventListener('mousedown', (mouseEvent: MouseEvent) => {  
        const mouseClickX = mouseEvent.offsetX;  
        const mouseClickY = mouseEvent.offsetY;  
        console.log('mouseClickX', mouseClickX, 'mouseClickY', mouseClickY);  
        const premultipliedX = mouseEvent.offsetX * DpiHelper.PIXEL_RATIO;  
        const premultipliedY = mouseEvent.offsetY * DpiHelper.PIXEL_RATIO;  
        console.log('premultipliedX', premultipliedX, 'premultipliedY', premultipliedY);  

```

--------------------------------

### Hit Test Mountain Series Example (TS)

Source: https://www.scichart.com/documentation/js/v4/2d-charts/chart-types/hit-test-api/fast-mountain-renderable-series

This TypeScript example demonstrates the hit test functionality for a mountain series. It includes necessary imports, chart setup, and event handling for mouse clicks to determine if the click falls within the mountain's area. The results are logged to the console and displayed on the page.

```typescript
import { SciChartSurface, NumericAxis, NumberRange, DpiHelper, CustomAnnotation, EHorizontalAnchorPoint, EVerticalAnchorPoint, XyDataSeries, FastMountainRenderableSeries } from "scichart";  
  
export async function hitTestMountainTs(divId: string) {  
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divId);  
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));  
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));  
    // Column series  
    const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];  
    const yValues = [0, 0.2, 1, 2.0, 2.5, 1.9, 1.9, 1.5, 1.2];  
    const mountainSeries = new FastMountainRenderableSeries(wasmContext, {  
        dataSeries: new XyDataSeries(wasmContext, {  
            xValues: xValues,  
            yValues: yValues  
        })  
    });  
    sciChartSurface.renderableSeries.add(mountainSeries);  
    // Add an SVG annotation to display the mouse click  
    const svgAnnotation = new CustomAnnotation({  
        svgString: `<svg width="8" height="8"><circle cx="50%" cy="50%" r="4" fill="#FF0000"/></svg>`,  
        isHidden: true,  
        horizontalAnchorPoint: EHorizontalAnchorPoint.Center,  
        verticalAnchorPoint: EVerticalAnchorPoint.Center  
    });  
    sciChartSurface.annotations.add(svgAnnotation);  
    sciChartSurface.domCanvas2D.addEventListener('mousedown', (mouseEvent: MouseEvent) => {  
        const mouseClickX = mouseEvent.offsetX;  
        const mouseClickY = mouseEvent.offsetY;  
        console.log('mouseClickX', mouseClickX, 'mouseClickY', mouseClickY);  
        const premultipliedX = mouseEvent.offsetX * DpiHelper.PIXEL_RATIO;  
        const premultipliedY = mouseEvent.offsetY * DpiHelper.PIXEL_RATIO;  
        console.log('premultipliedX', premultipliedX, 'premultipliedY', premultipliedY);  
        // IHitTestProvider.hitTest  

```

--------------------------------

### BaseHitTestProvider Constructor

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/basehittestprovider.html

Initializes a new instance of the BaseHitTestProvider class.

```APIDOC
## new BaseHitTestProvider(parentSeries: TRenderableSeries, wasmContext: TSciChart): BaseHitTestProvider

### Description
Creates an instance of the BaseHitTestProvider.

### Parameters
#### parentSeries: TRenderableSeries
the parent RenderableSeries that this Hit-Test provider is attached to
#### wasmContext: TSciChart
the SciChart WebAssembly Context containing native methods and access to our WebGL2 WebAssembly Drawing Engine

### Returns
BaseHitTestProvider
```

--------------------------------

### Hit Test Heatmap with TypeScript

Source: https://www.scichart.com/documentation/js/v4/2d-charts/chart-types/hit-test-api/uniform-heatmap-renderable-series

Full example demonstrating the hitTest functionality for a heatmap in TypeScript. Includes setup for SciChartSurface, axes, heatmap data, and mouse event handling to call the hitTest method.

```typescript
import {SciChartSurface, NumericAxis, DpiHelper, CustomAnnotation, EHorizontalAnchorPoint, EVerticalAnchorPoint, EAxisAlignment, HeatmapColorMap, HeatmapColorMap, UniformHeatmapDataSeries, UniformHeatmapRenderableSeries, NumberRange } from "scichart";  
  
export async function hitTestHeatmapTs(divId) {  
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divId);  
sciChartSurface.xAxes.add(  
    new NumericAxis(wasmContext, { axisTitle: 'Heatmap X', growBy: new NumberRange(0.05, 0.05) })  
);  
sciChartSurface.yAxes.add(  
    new NumericAxis(wasmContext, {  
        axisTitle: 'Heatmap Y',  
        axisAlignment: EAxisAlignment.Left,  
        growBy: new NumberRange(0.05, 0.05)  
    })  
);  
const gradientStops = [  
    { offset: 0, color: 'yellow' },  
    { offset: 1, color: 'red' }  
];  
const colorMap = new HeatmapColorMap({  
    minimum: 0,  
    maximum: 3,  
    gradientStops  
});  
const initialZValues = [  
    [3, 0, 1, 2],  
    [0, 1, 2, 3]  
];  
const dataSeries = new UniformHeatmapDataSeries(wasmContext, {  
    xStart: 0,  
    xStep: 1,  
    yStart: 3,  
    yStep: 1,  
    zValues: initialZValues  
});  
dataSeries.hasNaNs = true;  
const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {  
    opacity: 0.5,  
    dataSeries,  
    colorMap  
});  
sciChartSurface.renderableSeries.add(heatmapSeries);  
// Add an SVG annotation to display the mouse click  
const svgAnnotation = new CustomAnnotation({  
    svgString: `<svg width="8" height="8"><circle cx="50%" cy="50%" r="4" fill="#FF0000"/></svg>`,  
    isHidden: true,  
    horizontalAnchorPoint: EHorizontalAnchorPoint.Center,  
    verticalAnchorPoint: EVerticalAnchorPoint.Center  
});  
sciChartSurface.annotations.add(svgAnnotation);  
sciChartSurface.domCanvas2D.addEventListener('mousedown', (mouseEvent) => {  
    const mouseClickX = mouseEvent.offsetX;  
    const mouseClickY = mouseEvent.offsetY;  
    console.log('mouseClickX', mouseClickX, 'mouseClickY', mouseClickY);  
    const premultipliedX = mouseEvent.offsetX * DpiHelper.PIXEL_RATIO;  
    const premultipliedY = mouseEvent.offsetY * DpiHelper.PIXEL_RATIO;  
    console.log('premultipliedX', premultipliedX, 'premultipliedY', premultipliedY);  
    // IHitTestProvider.hitTest  
    const hitTestInfo = heatmapSeries.hitTestProvider.hitTest(premultipliedX, premultipliedY);  
    svgAnnotation.x1 = hitTestInfo.hitTestPointValues.x;  
    svgAnnotation.y1 = hitTestInfo.hitTestPointValues.y;  
    svgAnnotation.isHidden = false;  
    const resultDiv = document.getElementById('result');  
    resultDiv.innerText = `isHit = ${hitTestInfo.isHit}`;  
    console.log('hitTestInfo', hitTestInfo);  
});  
}  

```

--------------------------------

### Get Rubber Band Rectangle

Source: https://www.scichart.com/documentation/js/v5/typedoc/index

Computes a rectangle for zoom operations based on the starting and ending mouse points, direction, and viewport dimensions. This is crucial for interactive zooming in charts.

```typescript
getRubberBandRect(pointFrom: Point, pointTo: Point, xyDirection: EXyDirection, viewportRect: Rect): Rect
```

--------------------------------

### TooltipSvgAnnotation3D Constructor

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/tooltipsvgannotation3d.html

Initializes a new instance of the TooltipSvgAnnotation3D class.

```APIDOC
## new TooltipSvgAnnotation3D

### Description
Creates an instance of the CursorTooltipSvgAnnotation.

### Parameters
#### options: ITooltipSvgAnnotation3DOptions
- **options** (ITooltipSvgAnnotation3DOptions) - Required - Configuration options for the tooltip.

### Returns
TooltipSvgAnnotation3D - An instance of the TooltipSvgAnnotation3D.
```

--------------------------------

### RectangleSeriesHitTestProvider Constructor

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/rectangleserieshittestprovider.html

Initializes a new instance of the RectangleSeriesHitTestProvider.

```APIDOC
## new RectangleSeriesHitTestProvider

### Description
Creates an instance of the BaseHitTestProvider.

### Parameters
#### parentSeries: IRectangleRenderableSeries
- The parent RenderableSeries that this Hit-Test provider is attached to.

#### wasmContext: TSciChart
- The SciChart WebAssembly Context containing native methods and access to our WebGL2 WebAssembly Drawing Engine.

### Returns
- RectangleSeriesHitTestProvider
```

--------------------------------

### Point Gap Threshold

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/datalabelprovider.html

Gets or sets the zoom threshold above which label drawing will start. Default 0. This is expressed as the gap between the first points divided by the size of the first text. If data is unevenly spaced, consider pointCountThreshold or override shouldDrawText.

```APIDOC
## pointGapThreshold

### Description
Gets or sets the zoom threshold above which label drawing will start. Default 0. This is expressed as the gap between the first points divided by the size of the first text. If data is unevenly spaced, consider pointCountThreshold or override shouldDrawText.

### Method
`get pointGapThreshold(): number`
`set pointGapThreshold(value: number): void`

### Parameters
#### value: number
- **value** (number) - The zoom threshold value.

### Returns
`number` for getter, `void` for setter.
```

--------------------------------

### CursorTooltipSvgAnnotation Constructor

Source: https://www.scichart.com/documentation/js/v4/typedoc/classes/cursortooltipsvgannotation.html

Initializes a new instance of the CursorTooltipSvgAnnotation class.

```APIDOC
## new CursorTooltipSvgAnnotation

### Description
Creates an instance of the CursorTooltipSvgAnnotation.

### Parameters
#### options: ICursorTooltipSvgAnnotationOptions
- **options** (ICursorTooltipSvgAnnotationOptions) - Required - Configuration options for the annotation.

### Returns
CursorTooltipSvgAnnotation - The newly created CursorTooltipSvgAnnotation instance.
```
Tokens:
Raw