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:1,215,361
Snippets:21,647
Trust Score:9.9
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Webpack and related development dependencies

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

Command to install Webpack and associated development dependencies for npm start and copying wasm files.

```bash
npm install --save-dev webpack webpack-dev-server webpack-cli copy-webpack-plugin
```

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

### Install SciChart Financial Tools

Source: https://www.scichart.com/documentation/js/v5/scichart-extensions/scichart-financial-tools/overview

Use npm to install the required SciChart packages.

```bash
npm install scichart scichart-financial-tools
```

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

### Running the Tutorial

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

Command to build and run the SciChart.js application using npm.

```bash
npm start
```

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

### Rectangle Series Basic Example

Source: https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/fast-rectangle-renderable-series

This example demonstrates the basic setup of a rectangle series using `columnXMode: EColumnMode.StartEnd` and `columnYMode: EColumnYMode.TopBottom` to define the start and end X and Y positions for each rectangle.

```javascript
const xValues = [0, 6, 10, 17];  

const yValues = [0, 6, 2, 5];  

const x1Values = [5, 9, 15, 25];  

const y1Values = [5, 9, 8, 10];  

  

const rectangleSeries = new FastRectangleRenderableSeries(wasmContext, {  

    dataSeries: new XyxyDataSeries(wasmContext, {  

        xValues,  

        yValues,  

        x1Values,  

        y1Values  

    }),  

    columnXMode: EColumnMode.StartEnd, // x, x1  

    columnYMode: EColumnYMode.TopBottom, // y, y1  

    fill: "cornflowerblue",  

    stroke: "black",  

    strokeThickness: 1,  

    opacity: 0.5  

});  

  


```

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

### Hit Test Example

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

Example of using the hitTest method on a Column Series to get hit test information.

```javascript
        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);

    });

}
```

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

### Initialising an npm project

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

This command initializes a new npm project, creating a package.json file.

```bash
npm init
```

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

### Install React, SciChart.js, and SciChart-React packages

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

Command to install necessary npm packages for React, SciChart.js, and scichart-react.

```bash
npm install scichart scichart-react react react-dom
```

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

### getAxisSize Example

Source: https://www.scichart.com/documentation/js/v5/typedoc/classes/axisbase2d.html

Gets the size of the axis.

```typescript
getAxisSize(): number
```

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

### getDefaultNonZeroRange Example

Source: https://www.scichart.com/documentation/js/v5/typedoc/classes/axisbase2d.html

Gets the default non-zero range for the axis.

```typescript
getDefaultNonZeroRange(): NumberRange
```

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

### Example License Debug Output

Source: https://www.scichart.com/documentation/js/v5/user-manual/licensing-scichart-js/licensing-troubleshooting

Sample console output showing a healthy license status and configuration details.

```text
applyLicense 2D  

applyLicense running  

Initial license status is Community  

Runtime license found  

Runtime license status is Full  

license ok  

checkstatus: LicenseOK  

SciChart Debug dump  

. Is License Valid: 1  

. Is Debugging Allowed: 0  

. ExpiryDate: 2026-01-10T00:00:00  

. License Days Remaining: 122  

. License Type: Full  

. Order ID: SciChart.js Demo  

. Product Code: SC-JS-SDK-PRO  

. Full Features:JS-2D JS-3D  

. Trial Features:  

. License hostnames: scichart.com;demo.scichart.com;stagingdemo.scichart.com;stagingdemo2.scichart.com;staging.scitrader.io;  

. Is Server: false  

. Requres Validation: false  

.. Errors: 0  

. RuntimeChecker:  

... Is Debugger Attached: 0  

... Is IDE Tool: 0  

... Machine Id www.scichart.com
```

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

### Start Local Development Server

Source: https://www.scichart.com/documentation/js/v5/get-started/faqs/faq-20250722

Command to serve the application locally using Python.

```bash
python3 -m http.server 8000
```

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

### Install Babel for JSX files

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

Commands to install Babel core, React preset, and babel-loader for handling JSX files.

```bash
npm install --save-dev @babel/core
```

```bash
npm install --save-dev @babel/preset-react
```

```bash
npm install --save-dev babel-loader
```

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

### Full Example of hitTest Method on Column Series (TypeScript)

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

A complete TypeScript example demonstrating the setup of a SciChartSurface with FastColumnRenderableSeries and handling mouse clicks to perform hit testing.

```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;  
```

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

### Full Example of hitTest Method on Column Series (JavaScript)

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

A complete JavaScript example demonstrating the setup of a SciChartSurface with FastColumnRenderableSeries and handling mouse clicks to perform hit testing.

```javascript
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);  
    });  
}
```

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

### Full Example: Metadata Usage for a Line Chart (JavaScript)

Source: https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/hit-test-api/metadata

A complete JavaScript example demonstrating metadata usage for a line chart, including chart setup, data series creation, and event handling for mouse clicks.

```javascript
import { SciChartSurface, NumericAxis, NumberRange, DpiHelper, CustomAnnotation, EHorizontalAnchorPoint, EVerticalAnchorPoint, XyDataSeries, FastColumnRenderableSeries } from "scichart";
import { forbesData } from './metadata.js';

export async function hitTestLineMetadata(divId) {

    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divId);

    const HIT_TEST_RADIUS = 10 * DpiHelper.PIXEL_RATIO;

    const xAxis = new NumericAxis(wasmContext, { axisTitle: 'Forbes Rank' });

    xAxis.labelProvider.precision = 0;

    sciChartSurface.xAxes.add(xAxis);

    const yAxis = new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05), axisTitle: 'Net Worth, bln $' });

    yAxis.labelProvider.precision = 0;

    sciChartSurface.yAxes.add(yAxis);

    const dataSeries = new XyDataSeries(wasmContext);

    forbesData.forEach((data, i) => dataSeries.append(i + 1, data[0], data[1]));

    const columnSeries = new FastColumnRenderableSeries(wasmContext, {

        fill: '#228B22',

        dataSeries

    });

    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;


```

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

### BaseRenderableSeries Initialization

Source: https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/renderable-series-api-overview

Demonstrates how to initialize a RenderableSeries using constructor options for efficient setup.

```APIDOC
## BaseRenderableSeries Constructor

### Description
Initializes a new instance of a RenderableSeries (e.g., FastLineRenderableSeries) with optional configuration properties.

### Parameters
- **wasmContext** (Object) - Required - The WebAssembly context required for rendering.
- **options** (Object) - Optional - An object containing configuration properties such as stroke, strokeThickness, dataSeries, isVisible, and opacity.
```

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

### Example of calculating screen coordinate

Source: https://www.scichart.com/documentation/js/v5/typedoc/classes/domannotationbase.html

This example demonstrates how to calculate the screen coordinate of a data-value on the chart's xAxis, scale it by DpiHelper.PIXEL_RATIO, and add the scaled offset to get the real coordinate on the SVG canvas.

```javascript
// Say we have a data-value of "15" on the chart's xAxis.
// Step 1: We calculate the screen coordinate of it via the coordinateCalculator (or take it from our stored annotationBorders property),
// Step 2: Multiply that value by DpiHelper.PIXEL_RATIO
// Step 3: Add the already-scaled {xCoordSvgTrans} value to get the real coordinate on the SVG canvas.
```

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

### Initialize and configure a RenderableSeries

Source: https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/renderable-series-api-overview

Demonstrates two approaches to configuring a series: setting properties individually after instantiation or passing a configuration object to the constructor.

```javascript
const lineSeries = new FastLineRenderableSeries(wasmContext);  

lineSeries.stroke = "Red";  

lineSeries.strokeThickness = 3;  

lineSeries.dataSeries = new XyDataSeries(wasmContext, {xValues, yValues});  

lineSeries.isVisible = true;  

lineSeries.opacity = 0.7;  
```

```javascript
const lineSeries = new FastLineRenderableSeries(wasmContext, {  

    stroke: "Red",  

    strokeThickness: 3,  

    dataSeries: new XyDataSeries(wasmContext, {xValues, yValues}),  

    isVisible: true,  

    opacity: 0.7  

});  
```

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

### index.html

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

Basic HTML structure for the SciChart.js application, including a div to host the chart.

```html
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link rel="icon" href="data:,">
    <title>SciChart.js Tutorial 1</title>
    <script async type="text/javascript" src="bundle.js"></script>
    <style>
      body { font-family: 'Arial'}
    </style>
  </head>
  <body>
    <h1>Hello SciChart.js world!</h1>
    <p>In this example we setup webpack, scichart and create a simple chart with one X and Y axis</p>
    <!-- the Div where the SciChartSurface will reside -->
    <div id="scichart-root" style="width: 800px; height: 600px;"></div>
  </body>
</html>
```

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

### Pixel to Data Coordinate Conversion

Source: https://www.scichart.com/documentation/js/v5/typedoc/classes/coordinatecalculatorbase.html

Example of how to get a CoordinateCalculator instance and use it to convert between pixel and data coordinates.

```javascript
const axis: AxisCore;
const calc = axis.getCurrentCoordinateCalculator();

const pixel = calc.getCoordinate(1.23); // Gets the pixel coordinate for data-value 1.23
const dataValue = cald.getDataValue(pixel); // Performs the inverse operation to get data-value
```

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

### Full Example of hitTest Method on Bubble Series (TypeScript)

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

This is a complete TypeScript example demonstrating the hitTest functionality for bubble series, including chart setup, data series, event handling, and hit test invocation.

```typescript
import {SciChartSurface, NumericAxis, NumberRange, DpiHelper, CustomAnnotation, EHorizontalAnchorPoint, EVerticalAnchorPoint, FastBubbleRenderableSeries, EllipsePointMarker, XyzDataSeries} from "scichart;  

  

export async function hitTestBubbleTs(divId: string) {  

    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divId);  

    const HIT_TEST_RADIUS = 10 * DpiHelper.PIXEL_RATIO;  

    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) }));  

    const xBubbleValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];  

    const yBubbleValues = [0.5, 1.0, 1.8, 2.9, 3.5, 3.0, 2.7, 2.4, 1.7];  

    const zBubbleValues = [24, 12, 13, 16, 12, 15, 12, 19, 12];  

    const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {  

        pointMarker: new EllipsePointMarker(wasmContext, {  

            width: 24,  

            height: 24,  

            fill: "white",  

            strokeThickness: 2,  

            stroke: "#368BC1"  

        }),  

        dataSeries: new XyzDataSeries(wasmContext, {  

            xValues: xBubbleValues,  

            yValues: yBubbleValues,  

            zValues: zBubbleValues  

        })  

    });  

    sciChartSurface.renderableSeries.add(bubbleSeries);  

    
```

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

### index.js

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

Initializes SciChart.js, creates a SciChartSurface, and adds X and Y axes.

```javascript
import { SciChartSurface, NumericAxis } from "scichart";

async function initSciChart() {
  // LICENSING //
  // For community or trial usage, SciChart.js works out of the box
  // For commercial use of SciChart, you need a license.
  // Purchased license keys can be viewed at https://www.scichart.com/my-account
  // 
  // e.g. 
  // Set your license code here
  // SciChartSurface.setRuntimeLicenseKey("YOUR_RUNTIME_KEY");
  // 
  // Also, once activated (trial or paid license) having the licensing wizard open on your machine
  // will mean any or all applications you run locally will be fully licensed.
  // 
  // 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 xAxis = new NumericAxis(wasmContext);
  const yAxis = new NumericAxis(wasmContext);
  
  sciChartSurface.xAxes.add(xAxis);
  sciChartSurface.yAxes.add(yAxis);
  
  // That's it! You just created your first SciChartSurface!
}

initSciChart();
```

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

### package.json

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

This is an example of the package.json file after adding scripts and dependencies for SciChart.js and webpack.

```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": "^5.0.0-alpha.135"
    },
    "devDependencies": {
        "copy-webpack-plugin": "^13.0.0",
        "webpack": "^5.99.9",
        "webpack-cli": "^6.0.1",
        "webpack-dev-server": "^5.2.2"
    }
}
```

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

### Full Example of hitTest Method on Bubble Series (JavaScript)

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

This is a complete JavaScript example demonstrating the hitTest functionality for bubble series, including chart setup, data series, event handling, and hit test invocation.

```javascript
import {SciChartSurface, NumericAxis, NumberRange, DpiHelper, CustomAnnotation, EHorizontalAnchorPoint, EVerticalAnchorPoint, FastBubbleRenderableSeries, EllipsePointMarker, XyzDataSeries} from "scichart;  

  

export async function hitTestBubbleTs(divId) {  

    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divId);  

    const HIT_TEST_RADIUS = 10 * DpiHelper.PIXEL_RATIO;  

    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) }));  

    const xBubbleValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];  

    const yBubbleValues = [0.5, 1.0, 1.8, 2.9, 3.5, 3.0, 2.7, 2.4, 1.7];  

    const zBubbleValues = [24, 12, 13, 16, 12, 15, 12, 19, 12];  

    const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {  

        pointMarker: new EllipsePointMarker(wasmContext, {  

            width: 24,  

            height: 24,  

            fill: "white",  

            strokeThickness: 2,  

            stroke: "#368BC1"  

        }),  

        dataSeries: new XyzDataSeries(wasmContext, {  

            xValues: xBubbleValues,  

            yValues: yBubbleValues,  

            zValues: zBubbleValues  

        })  

    });  

    sciChartSurface.renderableSeries.add(bubbleSeries);  

    // 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 = bubbleSeries.hitTestProvider.hitTest(premultipliedX, premultipliedY, HIT_TEST_RADIUS);  

        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);  

    });  

}
```

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

### package.json

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

The package.json file after completing the project setup, including dependencies and devDependencies.

```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": "^5.0.0-alpha.135",
    "scichart-react": "^0.2.0-beta.2"
  }
}
```

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

### hitTestXSlice method on Line Series

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

Example of using the hitTestXSlice method on a Line Series to get hit test information.

```javascript
// hitTestXSlice method on Line Series  

const hitTestInfo = lineSeries.hitTestProvider.hitTestXSlice(premultipliedX, premultipliedY);
```

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

### Declaring a SciChartSurface

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

Code snippet demonstrating how to declare and create a SciChartSurface instance.

```javascript
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
  "scichart-root"
);
```

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

### NPM imports for SciChart3D.js

Source: https://www.scichart.com/documentation/js/v5/3d-charts/scichart-3d-basics/scichart-3d-basics-overview

This code snippet demonstrates how to import SciChart3D.js components when using npm for project management.

```javascript
// npm install scichart  

  

import {  

    SciChart3DSurface,  

    NumericAxis3D,  

    Vector3,  

    SciChartJsNavyTheme,  

    MouseWheelZoomModifier3D,  

    OrbitModifier3D,  

    ResetCamera3DModifier  

} from "scichart";  
```

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

### hitTestXSlice on Stacked Mountain Series

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

Example of using the hitTestXSlice method on a StackedMountainRenderableSeries to get information about the nearest point for CursorModifier and RolloverModifier.

```javascript
// hitTestXSlice on Stacked Mountain Series  

const hitTestInfo = stackedMountainRS.hitTestProvider.hitTestXSlice(premultipliedX, premultipliedY);
```

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

### Configuring Webpack

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

These commands install webpack and related development dependencies required for building the JavaScript application.

```bash
npm install --save-dev webpack

npm install --save-dev webpack-dev-server

npm install --save-dev webpack-cli

npm install --save-dev copy-webpack-plugin
```

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

### Custom LineSegmentPaletteProvider

Source: https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/fast-line-segment-renderable-series

An example of a custom palette provider that can be used with XyDataSeries and FastLineSegmentRenderableSeries to apply different colors to the start and end of line segments.

```javascript
class LineSegmentPaletteProvider implements IStrokePaletteProvider {
    public readonly strokePaletteMode = EStrokePaletteMode.GRADIENT;
    private readonly palettedStart = parseColorToUIntArgb("red");
    private readonly palettedEnd = parseColorToUIntArgb("blue");

    public onAttached(parentSeries: IRenderableSeries): void {}

    public onDetached(): void {}

    public overrideStrokeArgb(xValue: number, yValue: number, index: number): number {
        return index % 2 === 0 ? this.palettedStart : this.palettedEnd;
    }

    public toJSON(): TPaletteProviderDefinition {
        return { type: EPaletteProviderType.Custom, customType: "MyPaletteProvider" };
    }

}

```

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

### SciChart3DSurface.create() Example

Source: https://www.scichart.com/documentation/js/v5/3d-charts/scichart-3d-basics/scichart-3d-surface-create-and-create-single

An example of how to initialize a SciChart3DSurface using the create() method, which uses a shared WebGL context.

```javascript
import { SciChart3DSurface } from "scichart";  

  

async function initSciChart1() {  

    // Assumes a div in your HTML <div id="scichart-div-id"></div>  

    const { sciChart3DSurface, wasmContext } = await SciChart3DSurface.create("scichart-div-id");  

    // Now manipulate the sciChart3DSurface, adding axis, series and more  

    // When you exit the page and no longer want the chart to draw, call .delete() to free memory  

    sciChart3DSurface.delete();  

}  



```

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

### Installing SciChart via npm

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

This command installs the SciChart.js package from npm into your project.

```bash
npm install scichart
```

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

### Creating SciChart3DSurface

Source: https://www.scichart.com/documentation/js/v5/3d-charts/scichart-3d-basics/scichart-3d-basics-overview

This code snippet illustrates the process of creating a SciChart3DSurface instance, including optional theme, world dimensions, and camera settings.

```javascript
// Create a SciChart3DSurface in the host <div id=".." />  

const { wasmContext, sciChart3DSurface } = await SciChart3DSurface.create(divElementId, {  

    // Optional theme  

    theme: new SciChartJsNavyTheme(),  

    // Optional dimensions of the axis cube (X,Y,Z) in World coordinates  

    worldDimensions: new Vector3(300, 200, 300),  

    // Optional initial camera position and target  

    cameraOptions: {  

        position: new Vector3(300, 300, 300),  

        target: new Vector3(0, 50, 0)  

    }  

});  

  

// SciChart.js 3D supports only a single x,y,z axis. Declare your axis like this  

sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, { axisTitle: "X Axis" });  

sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, { axisTitle: "Y Axis" });  

sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { axisTitle: "Z Axis" });  
```

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

### App.jsx

Source: https://www.scichart.com/documentation/js/v5/get-started/tutorials-react/tutorial-02-creating-a-chart-with-scichart-react

Example of an App.jsx file demonstrating the use of SciChartReact with the initChart prop.

```jsx
import React from "react";
import { SciChartReact } from "scichart-react";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>&lt;SciChartReact/&gt; with initChart Tutorial</h1>
      </header>
      <SciChartReact 
        initChart={initChart}
        onInit={onInit}
        onDelete={onDelete}
        innerContainerProps={{ style: { width: "100%" } }}
        style={{ maxWidth: 900, height: 600 }}
      />
    </div>
  );
}

export default App;
```

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

### Pure JS imports for SciChart3D.js

Source: https://www.scichart.com/documentation/js/v5/3d-charts/scichart-3d-basics/scichart-3d-basics-overview

This code snippet shows how to include the SciChart.js library using a script tag for pure JavaScript environments.

```html
<script src="https://cdn.jsdelivr.net/npm/scichart/index.min.js"></script>  

  

const {  

    SciChart3DSurface,  

    NumericAxis3D,  

    Vector3,  

    SciChartJsNavyTheme,  

    MouseWheelZoomModifier3D,  

    OrbitModifier3D,  

    ResetCamera3DModifier  

} = SciChart;  
```

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

### getAnnotationBorders Example

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

Illustrates how to calculate the screen coordinate of a data-value on the chart's xAxis, scale it by PIXEL_RATIO, and add the scaled offset to get the real coordinate on the SVG canvas.

```javascript
// Say we have a data-value of "15" on the chart's xAxis. // Step 1: We calculate the screen coordinate of it via the coordinateCalculator (or take it from our stored annotationBorders property), // Step 2: Multiply that value by DpiHelper.PIXEL_RATIO // Step 3: Add the already-scaled {xCoordSvgTrans} value to get the real coordinate on the SVG canvas.
```
Tokens:
Raw