### Install Dependencies and Start Angular App

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Sandbox/AngularExamples/README.md

Run these commands in the Angular examples folder to install dependencies and start the development server.

```bash
npm ci --legacy-peer-deps
npm start
```

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

### Install Dependencies and Start Development Server

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Sandbox/CustomerExamples/Theming2D/README.md

Install project dependencies using npm and start the development server. Open the application in your browser at http://localhost:8080.

```bash
npm install
npm start
```

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

### Run SciChart.JS Examples

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/src/components/Examples/BuilderApi/CustomTypes/README.md

Instructions on how to clone the repository, install dependencies, and run the development server to view the examples.

```bash
git clone https://github.com/ABTSoftware/SciChart.JS.Examples.git
cd SciChart.JS.Examples/Examples
npm install
npm run dev
```

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

### Install and Start TanStack App

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/perf-tools-demo/README.md

Run these commands to install dependencies and start the development server for your TanStack application.

```bash
npm install
npm run start
```

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

### Install and Start SciChart.js Project

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/BoilerPlates/browser-global-module/README.md

Use these commands to install dependencies and start the SciChart.js project server. Ensure you have a server to serve HTML files due to CORS policy restrictions when loading data via XMLHttpRequest.

```bash
npm install
npm start
```

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

### Install, Build, and Start SciChart.js Project

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Documentation/Readme.md

Standard commands to set up and run a SciChart.js project. Ensure you have Node.js and npm installed.

```bash
npm install
npm run build
npm start
```

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

### Running the Example - Bash

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/src/components/Examples/Charts2D/PolarCharts/PolarUniformHeatmapChart/README.md

Provides bash commands to clone the repository, install dependencies, and run the development server.

```bash
git clone https://github.com/ABTSoftware/SciChart.JS.Examples.git
cd SciChart.JS.Examples/Examples
npm install
npm run dev
```

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

### Node.js Server Setup

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/AdvancedLicensing/nodejs-simple-server-licensing/README.md

This snippet shows the basic setup for a Node.js server to handle license requests. It requires installing dependencies and setting environment variables for the server secret and license key.

```bash
npm install
npm run dev
```

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

### Install and Run SciChart.js Demo App

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/README.md

Commands to install dependencies, run the demo app in development mode, build for production, and start the production server.

```shell
cd examples
npm install
npm run dev // run in dev mode
..
npm run build
npm start // run in prod mode
```

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

### Install Node.js Dependencies

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/src/components/Examples/Charts2D/PolarCharts/PolarUniformHeatmapUltrasound/README.md

Installs all the necessary Node.js dependencies for the SciChart.js Examples project using npm. This command should be run after navigating to the examples directory.

```bash
npm install

```

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

### Navigate to Animated Columns Example Directory

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/src/components/Examples/Charts2D/v4Charts/AnimatedColumns/README.md

Navigate into the specific directory for the animated columns chart example within the cloned repository. This prepares your environment for installing dependencies.

```bash
cd SciChart.JS.Examples/Examples/src/components/Charts2D/v4Charts/AnimatedColumns
```

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

### Run SciChart.js Development Server

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/src/components/Examples/Charts2D/PolarCharts/PolarUniformHeatmapUltrasound/README.md

Starts the development server for the SciChart.js Examples project using npm. This command compiles and serves the examples, making them accessible in a web browser.

```bash
npm run dev

```

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

### Navigate to Examples Directory

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/src/components/Examples/BuilderApi/SharedData/README.md

Change your current directory to the Examples folder within the cloned repository.

```bash
cd SciChart.JS.Examples/Examples
```

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

### Navigate to Examples Directory

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/src/components/Examples/Charts2D/PolarCharts/PolarMountainChart/README.md

Changes the current directory to the root of the SciChart.js Examples project.

```bash
cd SciChart.JS.Examples/Examples
```

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

### Generate Example Paths Script

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/README-AddNewExample.md

Command to run the script that generates example paths, which is necessary after adding a new example.

```bash
npm run generateExamplePaths
```

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

### Start Production Server

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/BoilerPlates/next/README.md

Starts the production server after a build has been created.

```bash
npm start
```

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

### Install Frontend Dependencies and Build

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/AdvancedLicensing/tauri-simple-server-licensing/README.md

Installs necessary Node.js packages for the frontend and builds the application.

```bash
npm install
npm run build
```

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

### Clone SciChart.js Examples Repository

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/src/components/Examples/Charts2D/PolarCharts/PolarUniformHeatmapUltrasound/README.md

Clones the SciChart.js Examples repository from GitHub to your local machine. This is the first step to running the provided examples.

```bash
git clone https://github.com/ABTSoftware/SciChart.JS.Examples.git

```

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

### Install Addons Dependencies

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Profiler/Readme.md

Installs dependencies for the Addons package. Navigate to the Addons directory before running.

```bash
cd ../Addons && npm i && cd ../Profiler
```

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

### Install Dependencies

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/BoilerPlates/next/README.md

Installs the necessary project dependencies using npm.

```bash
npm install
```

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

### Install SciChart.js and React Wrapper

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/BoilerPlates/scichart-react/Readme.md

Install the necessary SciChart.js and scichart-react packages using npm.

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

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

### Install SciChart.js and Vite Plugin

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/BoilerPlates/tauri-vite-vanilla/README.md

Install the SciChart.js library and the vite-plugin-static-copy for Wasm file deployment.

```bash
npm install scichart

npm install vite-plugin-static-copy // needed for copying wasm files
```

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

### Builder API Example

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Sandbox/DocumentationSnippets/PieChart/TypeScriptSnippets/Readme.md

This snippet demonstrates usage of the SciChart.js Builder API. Ensure you have installed dependencies and started the development server to run this example.

```javascript
import { SciChartSurface, categoryData, XyData, FastLineRenderableSeries, FastMountainRenderableSeries, GradientParams, LinearGradient } from "../../../../";

import { NumberUtil } from "../../../../helpers/NumberUtil";

import { app } from "../../../../helpers/app";

const divElementId = "scichart-builder-api";

const drawExample = async (
  sciChartSurface: SciChartSurface,
  { wasmContext, canvas }: { wasmContext: WebAssembly.WebAssemblyInstantiatedSource, canvas: HTMLCanvasElement } 
) => {
  // data series
  const data1 = categoryData([
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ]);
  const data2 = categoryData([
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ]);

  const xy1 = xyData([10, 14, 12, 18, 15, 20, 22, 19, 25, 23, 28, 30]);
  const xy2 = xyData([8, 12, 10, 16, 13, 18, 20, 17, 23, 21, 26, 28]);

  // Create Series
  const lineSeries = new FastLineRenderableSeries(wasmContext, {
    dataSeries: xy1,
    stroke: "#405090",
    strokeThickness: 3,
  });

  const mountainSeries = new FastMountainRenderableSeries(wasmContext, {
    dataSeries: xy2,
    stroke: "#405090",
    strokeThickness: 3,
    fill: "#405090",
    fillLinearGradient: new LinearGradient({
      x1: 0,
      y1: 0,
      x2: 0,
      y2: 1,
    }),
  });

  // Create Series
  const lineSeries2 = new FastLineRenderableSeries(wasmContext, {
    dataSeries: xy1,
    stroke: "#FF2C2C",
    strokeThickness: 3,
  });

  const mountainSeries2 = new FastMountainRenderableSeries(wasmContext, {
    dataSeries: xy2,
    stroke: "#FF2C2C",
    strokeThickness: 3,
    fill: "#FF2C2C",
    fillLinearGradient: new LinearGradient({
      x1: 0,
      y1: 0,
      x2: 0,
      y2: 1,
    }),
  });

  // Construct the SciChartSurface
  const { sciChartBuilder } = await SciChart.createSciChartBuilder(wasmContext);

  const chart = sciChartBuilder
    .buildChart(divElementId, {
      // X Axis
      xAxes: [
        sciChartBuilder.buildNumericAxis({
          growBy: new SciChart.Point(
            0.1,
            0.1
          ),
        }),
      ],
      // Y Axis
      yAxes: [
        sciChartBuilder.buildNumericAxis({
          growBy: new SciChart.Point(
            0.1,
            0.1
          ),
        }),
      ],
      // Series
      series: [
        sciChartBuilder.buildRenderableSeries({
          type: FastLineRenderableSeries,
          options: {
            dataSeries: xy1,
            stroke: "#405090",
            strokeThickness: 3,
          },
        }),
        sciChartBuilder.buildRenderableSeries({
          type: FastMountainRenderableSeries,
          options: {
            dataSeries: xy2,
            stroke: "#405090",
            strokeThickness: 3,
            fill: "#405090",
            fillLinearGradient: new LinearGradient({
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1,
            }),
          },
        }),
        sciChartBuilder.buildRenderableSeries({
          type: FastLineRenderableSeries,
          options: {
            dataSeries: xy1,
            stroke: "#FF2C2C",
            strokeThickness: 3,
          },
        }),
        sciChartBuilder.buildRenderableSeries({
          type: FastMountainRenderableSeries,
          options: {
            dataSeries: xy2,
            stroke: "#FF2C2C",
            strokeThickness: 3,
            fill: "#FF2C2C",
            fillLinearGradient: new LinearGradient({
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1,
            }),
          },
        }),
      ],
    })
    .build();

  return chart;
};

// Helper function to create XY data
function xyData(data) {
  return new XyData({ xValues: NumberUtil.range(data.length), yValues: data });
}

// Helper function to create Category data
function categoryData(data) {
  return new XyData({ xValues: data, yValues: NumberUtil.range(data.length) });
}

app.register("scichart-builder-api", drawExample);

```

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

### Set up React-Query Client and Provider

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/perf-tools-demo/README.md

Initialize a `QueryClient` and wrap your application with `QueryClientProvider` in `main.tsx`.

```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// ...

const queryClient = new QueryClient();

// ...

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <QueryClientProvider client={queryClient}> 
      <RouterProvider router={router} /> 
    </QueryClientProvider>
  );
}
```

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

### Verify Vite Installation

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Sandbox/WebsiteDemos/ScichartSDR/docs/plans/2026-03-09-pwa-implementation.md

Checks if Vite is installed correctly by printing its version. This confirms that the PWA dependencies did not break the build setup.

```bash
npx vite --version
```

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

### Add Band Chart Example to Angular App

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Sandbox/AngularExamples/README.md

In `angularExample.ts`, add the Band chart example's ID, path, title, and import its `drawExample` function. This is part of the primitive example setup.

```typescript
    import * as bandSeriesChartExampleInfo from "../../../.. /Examples/src/components/Examples/Charts2D/BasicChartTypes/BandSeriesChart/drawExample" ;

    chart2D_basicCharts_BandSeriesChart: {
        id: "chart2D_basicCharts_BandSeriesChart",
        path: ExampleStrings.urlBandChart,
        title: ExampleStrings.titleBandChart(framework),
        drawExample: bandSeriesChartExampleInfo.drawExample
    },
```

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

### Create and Run Blazor Project

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/BoilerPlates/blazor/README.md

Steps to create a new Blazor project using the .NET CLI and run it.

```bash
cd MyBlazorApp
dotnet run
```

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

### SubCharts API Basic Usage

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Sandbox/DocumentationSnippets/SubChartsApi/JavaScriptSnippets/MultipleSubChartsSync/Readme.md

Demonstrates basic usage of the SubCharts API in SciChart.js. Ensure you have installed dependencies and started the development server.

```javascript
/*
 * SciChart.js - SubCharts API Basic Usage
 * 
 * To view the full text of this code sample online, visit www.scichart.com/javascript-chart-documentation
 */

// This is a placeholder for the actual code snippet.
// The original content did not contain a runnable code block, only a reference to one.
console.log("SciChart.js SubCharts API Basic Usage example placeholder.");

```

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

### Setup SciChart.js Polar Chart

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/src/components/Examples/Charts2D/PolarCharts/PolarUniformHeatmapUltrasound/README.md

Initializes a SciChart.js Polar Chart with a specific medical-themed title and configures a 60-degree sector view starting at 240 degrees.

```javascript
const { SciChartSurface, SciChartPolarSurface, EPolarAxisMode, PolarNumericAxis, UniformHeatmapDataSeries, PolarUniformHeatmapRenderableSeries, HeatmapColorMap, LineArrowAnnotation, PolarMouseWheelZoomModifier, PolarZoomExtentsModifier, PolarPanModifier } = SciChart; // ALL{[LicenseManager.setLicenseKey("YOUR_LICENSE_KEY");]}

const drawExample = async (
    wrapperId,
    
) => {
    const { sciChartSurface, wasAntiAliasingEnabled } = await SciChartSurface.create(wrapperId, {
        surfaceType: "WebGLProtocol",
        webAssemblyUrl: "./scichart2d.wasm",
        // Set to true to enable anti-aliasing. This is a performance-intensive feature.
        // If you are experiencing performance issues, try setting this to false.
        // wasAntiAliasingEnabled: false,
    });

    // Create a Polar Chart
    const polarSurface = await sciChartSurface.addSurface(new SciChartPolarSurface({
        title: "Fetal Ultrasound Data (31 Weeks)",
        // Configure a 60-degree sector view (Math.PI/3) starting at 240 degrees
        // (Math.PI * 3 / 2) - (Math.PI / 6) = 270 - 30 = 240 degrees
        totalAngle: Math.PI / 3,
        startAngle: (Math.PI * 3 / 2) - (Math.PI / 6),
        // Set innerRadius to create a donut-style visualization area
        innerRadius: 0.4,
    }));

    // Configure Angular Axis
    polarSurface.xAxes.add(new PolarNumericAxis({
        axisMode: EPolarAxisMode.Angular,
        axisTitle: "Degrees",
        axisTitlePadding: 10,
        majorDelta: 30,
        minorDelta: 10,
        // Set to true to show axis labels
        axisLabelsVisible: true,
        // Set to true to show axis lines
        axisLineVisible: true,
        // Set to true to show major grid lines
        majorGridLineStyle: {
            stroke: "#FFFFFF",
            strokeDashArray: [4, 4],
            strokeThickness: 1,
        },
        // Set to true to show minor grid lines
        minorGridLineStyle: {
            stroke: "#FFFFFF",
            strokeDashArray: [2, 2],
            strokeThickness: 0.5,
        },
    }));

    // Configure Radial Axis
    polarSurface.yAxes.add(new PolarNumericAxis({
        axisMode: EPolarAxisMode.Radial,
        axisTitle: "Distance (mm)",
        axisTitlePadding: 10,
        majorDelta: 10,
        minorDelta: 5,
        // Set to true to show axis labels
        axisLabelsVisible: true,
        // Set to true to show axis lines
        axisLineVisible: true,
        // Set to true to show major grid lines
        majorGridLineStyle: {
            stroke: "#FFFFFF",
            strokeDashArray: [4, 4],
            strokeThickness: 1,
        },
        // Set to true to show minor grid lines
        minorGridLineStyle: {
            stroke: "#FFFFFF",
            strokeDashArray: [2, 2],
            strokeThickness: 0.5,
        },
    }));

    // Add Heatmap Data Series
    const heatmapDataSeries = new UniformHeatmapDataSeries({
        xValues: [],
        yValues: [],
        zValues: [],
        // Set to true to enable heatmap data series
        isDataSeriesXy: true,
        // Set to true to enable heatmap data series
        isDataSeriesXyz: true,
    });

    // Add Heatmap Renderable Series
    const heatmapRenderableSeries = new PolarUniformHeatmapRenderableSeries({
        dataSeries: heatmapDataSeries,
        // Set heatmap opacity to 0.8 for semi-transparent overlay effect
        opacity: 0.8,
        // Set heatmap color map to transparent-to-white gradient
        colorMap: HeatmapColorMap.createTransparentToWhite(),
    });

    polarSurface.renderableSeries.add(heatmapRenderableSeries);

    // Add Medical Annotations
    // Add LineArrowAnnotation for head diameter measurement
    polarSurface.annotations.add(new LineArrowAnnotation({
        x1: 0.1,
        y1: 0.1,
        x2: 0.3,
        y2: 0.3,
        stroke: "#FFFFFF",
        strokeThickness: 2,
        headWidth: 10,
        headLength: 10,
    }));

    // Add LineArrowAnnotation for femur length measurement
    polarSurface.annotations.add(new LineArrowAnnotation({
        x1: 0.5,
        y1: 0.5,
        x2: 0.7,
        y2: 0.7,
        stroke: "#FFFFFF",
        strokeThickness: 2,
        headWidth: 10,
        headLength: 10,
    }));

    // Add Polar Modifiers for Interactivity
    polarSurface.chartModifiers.add(new PolarMouseWheelZoomModifier());
    polarSurface.chartModifiers.add(new PolarZoomExtentsModifier());
    polarSurface.chartModifiers.add(new PolarPanModifier());

    return {
        sciChartSurface,
        heatmapDataSeries,
        wasAntiAliasingEnabled
    };
};

```

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

### Vanilla JavaScript Example Initialization

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/README-AddNewExample.md

Demonstrates running a SciChart example without React, manually handling chart creation and disposal.

```javascript
import { drawExample } from './drawExample';

const chartId = 'myChart';
const sciChartSurface = new SciChartSurface(chartId);
// ... other setup
drawExample(sciChartSurface);
// ... cleanup on dispose
```

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

### Angular 3D LiDAR Chart Setup

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Examples/src/components/Examples/FeaturedApps/ScientificCharts/LiDAR3DPointCloudDemo/README.md

Sets up a SciChart3DSurface and a heatmap legend within an Angular standalone component. This example utilizes SciChart Angular components for integration.

```typescript
import { Component, ViewEncapsulation } from "@angular/core";
import {
  SciChartSurface,
  NumericAxis3D,
  AxisAlignment3D,
  EAxisAlignment3D,
  EAutoRange,
  EAxisAlignment,
  EAxisAlignment3D,
  ELightingPackage,
  ELightDirection,
  ELogAxis3D,
  EOrthographicProjection,
  EStroke3DStyle,
  EText3DStyle,
  EVolumeShape,
  GridLines3D,
  MouseWheelZoomModifier3D,
  OrbitModifier3D,
  Vector3,
  SciChart3DSurface,
  SciChartSurfaceBase,
  SciChartSurfaceCollection,
  SurfaceMeshRenderableSeries3D,
  UniformGridDataSeries3D,
  ScatterRenderableSeries3D,
  PixelPointMarker3D,
  GradientParams,
  ColorMap,
  HeatmapLegend,
  LegendTitleStyle,
  SciChartVerticalGroup,
  SciChartHorizontalGroup,
  SciChartGroup,
  SciChart3D,
  SciChart,
  SciChartSurface,
  SciChartSurfaceBase,
  SciChartSurfaceCollection,
  SurfaceMeshRenderableSeries3D,
  UniformGridDataSeries3D,
  ScatterRenderableSeries3D,
  PixelPointMarker3D,
  GradientParams,
  ColorMap,
  HeatmapLegend,
  LegendTitleStyle,
  SciChartVerticalGroup,
  SciChartHorizontalGroup,
  SciChartGroup,
  SciChart3D,
  SciChart,
  AscReader
} from "scichart";

import { SciChartAngularSunburstChartModule } from "./node_modules/scichart-angular/dist/index";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  title = "scichart-angular-lidar-demo";

  public async drawExample(): Promise<void> {
    const {
      SciChart3DSurface,
      NumericAxis3D,
      AxisAlignment3D,
      EAxisAlignment3D,
      EAutoRange,
      ELightingPackage,
      ELightDirection,
      MouseWheelZoomModifier3D,
      OrbitModifier3D,
      Vector3,
      AscReader,
      ScatterRenderableSeries3D,
      PixelPointMarker3D,
      SurfaceMeshRenderableSeries3D,
      UniformGridDataSeries3D,
      GradientParams,
      ColorMap,
    } = await SciChart.load({
      // Load necessary SciChart.js modules
      surface3d: [SciChart3DSurface, NumericAxis3D, AxisAlignment3D, MouseWheelZoomModifier3D, OrbitModifier3D, Vector3, ScatterRenderableSeries3D, PixelPointMarker3D, SurfaceMeshRenderableSeries3D, UniformGridDataSeries3D, GradientParams, ColorMap],
      core: [EAxisAlignment3D, EAutoRange, ELightingPackage, ELightDirection],
      helpers: [AscReader]
    });

    // Create and configure the 3D surface
    const sciChart3DSurface = new SciChart3DSurface({
      id: "chart3d",
      worldDimensions: new Vector3(1000, 200, 1000),
      cameraArgs: {
        position: new Vector3(-500, 500, -500),
        target: new Vector3(0, 100, 0),
      },
      lightingPackage: ELightingPackage.Default,
      lightDirection: new Vector3(ELightDirection.X.toString(), ELightDirection.Y.toString(), ELightDirection.Z.toString()),
    });

    // Configure X, Y, Z axes
    sciChart3DSurface.xAxes.add(new NumericAxis3D({
      id: "xAxis",
      labelProvider: { formatLabel: (value: number) => `${value} M` },
      axisTitle: "X Distance (Meters)",
      axisTitleStyle: { fontSize: 16, color: "#FFF" },
      axisBorder: { thickness: 0 },
      labelStyle: { fontSize: 12, color: "#FFF" },
      gridLines: { color: "#FFF", alpha: 0.1 },
    }));
    sciChart3DSurface.yAxes.add(new NumericAxis3D({
      id: "yAxis",
      labelProvider: { formatLabel: (value: number) => `${value} M` },
      axisTitle: "Height (Meters)",
      axisTitleStyle: { fontSize: 16, color: "#FFF" },
      axisBorder: { thickness: 0 },
      labelStyle: { fontSize: 12, color: "#FFF" },
      gridLines: { color: "#FFF", alpha: 0.1 },
      autoRange: EAutoRange.Never,
      visibleRange: [0, 200],
    }));
    sciChart3DSurface.zAxes.add(new NumericAxis3D({
      id: "zAxis",
      labelProvider: { formatLabel: (value: number) => `${value} M` },
      axisTitle: "Z Distance (Meters)",
      axisTitleStyle: { fontSize: 16, color: "#FFF" },
      axisBorder: { thickness: 0 },
      labelStyle: { fontSize: 12, color: "#FFF" },
      gridLines: { color: "#FFF", alpha: 0.1 },
    }));

    // Load and parse ASC data
    const ascReader = new AscReader();
    const response = await fetch("../assets/data/asc/DEM_F64.asc");
    const ascData = await response.text();
    const gridData = ascReader.parse(ascData);

    // Define gradient colors for heatmap
    const gradientStops = [
      { offset: 0, color: "#0000FF" },
      { offset: 0.2, color: "#00FFFF" },
      { offset: 0.4, color: "#00FF00" },
      { offset: 0.6, color: "#FFFF00" },
      { offset: 0.8, color: "#FF0000" },
      { offset: 1, color: "#800000" },
    ];
    const colorMap = new ColorMap({
      linearGradient: gradientStops,
      // Use height map interpolation for coloring
      interpolate: "linear",
    });

    // Create Surface Mesh Data Series
    const surfaceDataSeries = new UniformGridDataSeries3D({
      xValues: gridData.xValues,
      yValues: gridData.yValues,
      zValues: gridData.zValues,
      dataSeriesName: "Surface Mesh",
      format: (x, y, z) => z,
    });

    // Add Surface Mesh Series
    sciChart3DSurface.renderableSeries.add(new SurfaceMeshRenderableSeries3D({
      dataSeries: surfaceDataSeries,
      opacity: 0.8,
      drawSkirt: true,
      stroke: "#FFF",
      strokeThickness: 0.5,
      meshColorMode: "heatmap", // Use heatmap coloring
      colorMap: colorMap,
      contourStrokeStyle: EStroke3DStyle.Solid,
      contourStrokesY: 10, // Number of contour lines
    }));

    // Create Point Cloud Data Series
    const pointCloudDataSeries = new UniformGridDataSeries3D({
      xValues: gridData.xValues,
      yValues: gridData.yValues,
      zValues: gridData.zValues,
      dataSeriesName: "Point Cloud",
    });

    // Add Point Cloud Series
    sciChart3DSurface.renderableSeries.add(new ScatterRenderableSeries3D({
      dataSeries: pointCloudDataSeries,
      pointMarker: new PixelPointMarker3D({ width: 2, height: 2, color: "#FFF" }),
      // Use the same color map for point cloud coloring based on height
      colorMode: "heatmap",
      colorMap: colorMap,
    }));

    // Add Interactivity Modifiers
    sciChart3DSurface.chartModifiers.add(new MouseWheelZoomModifier3D(), new OrbitModifier3D());

    return sciChart3DSurface;
  }

  public async drawHeatmapLegend(): Promise<void> {
    const { HeatmapLegend, LegendTitleStyle, SciChartVerticalGroup } = await SciChart.load({
      // Load necessary SciChart.js modules
      core: [HeatmapLegend, LegendTitleStyle, SciChartVerticalGroup],
    });

    // Create a heatmap legend
    const heatmapLegend = new HeatmapLegend({
      id: "heatmapLegend",
      orientation: "top",
      axisTitle: "Height (Meters)",
      axisTitleStyle: new LegendTitleStyle({
        fontSize: 16,
        color: "#FFF",
      }),
      labelStyle: {
        fontSize: 12,
        color: "#FFF",
      },
      trackCurrentValue: true,
      // Define gradient stops matching the main chart
      linearGradient: [
        { offset: 0, color: "#0000FF" },
        { offset: 0.2, color: "#00FFFF" },
        { offset: 0.4, color: "#00FF00" },
        { offset: 0.6, color: "#FFFF00" },
        { offset: 0.8, color: "#FF0000" },
        { offset: 1, color: "#800000" },
      ],
    });

    // Group the chart and legend vertically
    const group = new SciChartVerticalGroup();
    group.add(heatmapLegend);

    return group;
  }
}

```

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

### Server API Call Example

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/AdvancedLicensing/SimpleServerSideLicensing-Readme.md

This illustrates the GET request SciChart.js makes to the server to obtain a license token. The 'nonce' parameter is included only when the server is configured for round-trip validation.

```text
GET /api/license?orderid=<X>[&nonce=<hex>]    (nonce only in round-trip mode)
```

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

### Build and Run Main App in Production Mode

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/ProfilingTestSetup/Readme.md

Builds the production bundle and serves it. This is for deploying or testing the optimized application.

```bash
npm run build
npm start
```

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

### Error Bars Chart Example (TypeScript)

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Sandbox/DocumentationSnippets/RenderableSeriesAPI/TextSeries/Readme.md

This code sample demonstrates how to create an Error Bars Chart using SciChart.js. Ensure you have the necessary dependencies installed and the development server running.

```typescript
import * as SciChart from "../";
import { SciChartSurface } from "../";
import { NumericAxis } from "../";
import { FastLineRenderableSeries } from "../";
import { XyDataSeries } from "../";
import { EllipsePointMarker } from "../";
import { EPointShape } from "../";
import { EAxisAlignment } from "../";
import { ESeriesType } from "../";
import { EStrokeAnimation } from "../";
import { EAnimationType } from "../";

// SCICHART_MODULES_IMPORT_START
// SCICHART_MODULES_IMPORT_END

const divElementId = "scichart-root";

const drawExample = async () => {
  // Create a SciChartSurface
  const sciChartSurface = await SciChart.SciChartSurface.create(divElementId, {
    // Add the SciChartOverview control
    overview: SciChart.SciChartOverview,
  });

  // Create an X,Y axis and renderable series
  const xAxis = new SciChart.NumericAxis(sciChartSurface.webAssemblyContext2D, {
    axisTitle: "X Axis Title",
    axisAlignment: EAxisAlignment.Bottom, 
  });
  const yAxis = new SciChart.NumericAxis(sciChartSurface.webAssemblyContext2D, {
    axisTitle: "Y Axis Title",
    axisAlignment: EAxisAlignment.Left,
  });

  sciChartSurface.xAxes.add(xAxis);
  sciChartSurface.yAxes.add(yAxis);

  // Create a data series with error bars
  const dataSeries = new SciChart.XyDataSeries(sciChartSurface.webAssemblyContext2D);
  dataSeries.append(0, 5, 0.5, 0.5); // x, y, yError, xError
  dataSeries.append(1, 7, 0.8, 0.3);
  dataSeries.append(2, 6, 0.6, 0.4);
  dataSeries.append(3, 8, 0.9, 0.2);
  dataSeries.append(4, 7, 0.7, 0.5);
  dataSeries.append(5, 9, 1.0, 0.3);
  dataSeries.append(6, 8, 0.8, 0.4);
  dataSeries.append(7, 10, 1.1, 0.2);
  dataSeries.append(8, 9, 0.9, 0.5);
  dataSeries.append(9, 11, 1.2, 0.3);

  // Add a line series with error bars
  const lineSeries = sciChartSurface.renderableSeries.add(new SciChart.FastLineRenderableSeries(sciChartSurface.webAssemblyContext2D, {
    dataSeries: dataSeries,
    stroke: "#FF6600",
    strokeThickness: 2,
    // Add error bars
    errorBarWidth: 10,
    errorBarColor: "#FF6600",
    errorBarThickness: 2,
    errorBarStrokeStyle: "#FF6600",
    errorBarType: ESeriesType.ErrorBarSeries,
    // Add point markers
    pointMarker: new EllipsePointMarker(sciChartSurface.webAssemblyContext2D, {
      width: 7,
      height: 7,
      fillStyle: "#FF6600",
      strokeStyle: "#FF6600",
      shape: EPointShape.Ellipse,
    }),
    animation:
      new SciChart.MoveAnimation(sciChartSurface.webAssemblyContext2D, {
        duration: 500,
        easing: EAnimationType.OutQuad,
      }),
  }));
};

drawExample();

```

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

### Create React Component with SciChartReact

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/BoilerPlates/tauri-vite-react/README.md

Integrate SciChart.js into a React component using the SciChartReact component and passing the chart configuration. This example shows basic setup and comments for licensing and Wasm CDN loading.

```javascript
function App() {
  // LICENSING
  // Commercial licenses set your license code here
  // Purchased license keys can be viewed at https://www.scichart.com/profile
  // How-to steps at https://www.scichart.com/licensing-scichart-js/
  // SciChartSurface.setRuntimeLicenseKey("YOUR_RUNTIME_KEY");

  // to use WebAssembly files from CDN instead of the same origin
  // SciChartSurface.loadWasmFromCDN();

  // Note: for both licensing and WASM configurations - make sure they are set on the client side.

  return (
    <div>
      <h1>SciChart with React + Vite</h1>
      <SciChartReact config={chartConfig} style={{ width: 900 }} />
    </div>
  );
}
```

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

### Install Tauri CLI

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/AdvancedLicensing/tauri-simple-server-licensing/README.md

Installs the Tauri CLI version 2. Ensure you have Rust installed.

```bash
cargo install tauri-cli --version "^2" --locked
```

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

### 2D Chart Tutorials Setup

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/LLMs.txt

Sequential tutorials for setting up 2D charts with SciChart.js, covering project setup, adding series and data, zoom/pan, real-time updates, annotations, tooltips, legends, multiple axes, linking charts, and vertical charts.

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

### Run Development Server

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/BoilerPlates/next/README.md

Compiles the project and starts a hot-reloading development server.

```bash
npm run dev
```

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

### Preview Production Build Locally

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/Sandbox/demo-nuxtjs/README.md

After building the application for production, use this command to preview the built application locally. This helps in testing the production environment before deployment.

```bash
npm run preview
```

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

### Install SciChart.js and scichart-react

Source: https://github.com/abtsoftware/scichart.js.examples/blob/master/BoilerPlates/react-vite/README.md

Install the necessary SciChart.js packages for your React application. It's recommended to install both `scichart` and `scichart-react` for seamless integration.

```bash
npm install scichart
// we also strongly suggest to install scichart-react for easier integration
npm install scichart-react
```