LightningChart JS

https://lightningchart.com/js-charts/api-documentation/v8.0.2/
Admin
LightningChart JS is a high-performance charting library for JavaScript that provides interactive 2D...
Tokens:1,584,010
Snippets:11,124
Trust Score:8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Example Theme Properties

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/Theme

Optional properties specifically for LightningChart JS online examples and projects.

```APIDOC
## Example Theme Properties

### Description
Optional properties used in LightningChart JS Online Examples and projects. These are included in official themes but not required in custom themes. Ensure an official theme is used and consider adding a type check for `Theme.examples` if type safety is needed.
```

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

### Theme Example Properties

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/OfficialTheme

Properties used exclusively in LightningChart JS Online Examples, with guidance on their usage in custom themes.

```APIDOC
## Theme Example Properties

### `examples`

`examples`: ThemeExampleProperties

Properties of Theme that are optional, and officially only used in LightningChart JS Online Examples and projects.
These are guaranteed to be included in all official Library Themes provided by LightningChart, but not required in custom Themes defined by users.
If you want to use example theme properties in your application, then make sure to do these two things:
  1. Use an official Theme supplied by LightningChart.
  2. If your project requires type safety, then add a sanity check that throws an error if the `Theme.examples` property is `undefined`, like this:

```
 // Example, ensure official LightningChart JS theme is in use.  
 const theme = chart.getTheme()  
 if (!theme.examples) {  
     throw new Error(`LightningChart JS Theme.examples is undefined. You are probably using an unofficial theme and attempting to access example theme properties!`)  
 }

```
```

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

### PalettedFill Usage Examples

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/PalettedFill

Practical examples demonstrating how to use PalettedFill with PointSeries for coloring based on 'y' coordinates and custom data values.

```APIDOC
## PalettedFill Usage Examples

**Example 1, paletted points fill by 'y' coordinates.**

```javascript
 // Example 1, paletted points fill by 'y' coordinates.  
 PointSeries.setPointFillStyle(new PalettedFill({
     lookUpProperty: 'y',
     lut: new LUT({
         interpolate: true,
         steps: [
             { value: 0, color: ColorRGBA( 0, 0, 0 ) },
             { value: 10, color: ColorRGBA( 255, 0, 0 ) },
             { value: 20, color: ColorRGBA( 0, 255, 0 ) },
             { value: 30, color: ColorRGBA( 0, 0,255 ) },
         ]
     })
 }))

```

**Example 2, paletted points fill by user supplied data point values.**

```javascript
 // Example 2, paletted points fill by user supplied data point values.  
 PointSeries
     .setPointFillStyle(new PalettedFill({
          lookUpProperty: 'value',
          lut: new LUT({
              interpolate: true,
              steps: [
                  { value: 0, color: ColorRGBA( 0, 0, 0 ) },
                  { value: 100, color: ColorRGBA( 255, 0, 0 ) },
              ]
          })
     }))
     .add([
         { x: Math.random() * 100, y: Math.random() * 100, value: Math.random() * 100 },
         { x: Math.random() * 100, y: Math.random() * 100, value: Math.random() * 100 },
         { x: Math.random() * 100, y: Math.random() * 100, value: Math.random() * 100 },
         { x: Math.random() * 100, y: Math.random() * 100, value: Math.random() * 100 },
         { x: Math.random() * 100, y: Math.random() * 100, value: Math.random() * 100 },
     ])

```
```

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

### Heatmap Start Coordinate

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/HeatmapGridSeries

Gets the start coordinate of a Heatmap on its X and Y axis.

```APIDOC
## GET getStart

### Description
Get start coordinate of Heatmap on its X and Y axis.

### Method
GET

### Endpoint
/getStart

### Returns
#### Success Response (200)
- **Point** - Coordinate on axis where the 1st heatmap sample will be positioned.

### Response Example
```json
{
  "x": 0,
  "y": 0
}
```
```

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

### Initialize LightningChart JS

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/LightningChartOptions

Demonstrates the basic initialization of LightningChart JS, including how to provide a license key or use the community license.

```javascript
const lcjs = lightningChart({
     // Either supply license number, or omit for automatic community license.
     // license: 'my-license-number'
 })

 // Create charts...
 const chart = lcjs.ChartXY()
```

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

### Initialize LightningChart JS

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/LightningChart

Demonstrates how to initialize the LightningChart JS library, optionally providing license information. It also shows how to create a basic `ChartXY` instance.

```javascript
const lcjs = lightningChart({
     // Either supply license number, or omit for automatic community license.
     // license: 'my-license-license'
 })

 // Create charts...
 const chart = lcjs.ChartXY()
```

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

### Get Heatmap Start Point

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/SurfaceScrollingGridSeries3D

Retrieves the starting coordinate of the Heatmap on its X and Z axes.

```APIDOC
## GET getStart

### Description
Get start coordinate of Heatmap on its X and Z axis.

### Method
GET

### Endpoint
/api/charts/getStart

### Returns
- **PointXZ** - Coordinate on axis where 1st heatmap sample will be positioned.
```

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

### Get Heatmap Start Coordinate

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/HeatmapGridSeries

Retrieves the start coordinate of a Heatmap on its X and Y axes. This indicates the position of the first sample.

```javascript
getStart(): Point
```

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

### SolidFill Class Documentation

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/SolidFill

This section provides comprehensive documentation for the SolidFill class, including its constructor, properties, and methods, with usage examples.

```APIDOC
## Class SolidFill

Style class for describing a _solid fill color_.

Instances of SolidFill, like all LCJS style classes, are _immutable_, meaning that its setters don't modify the actual object, but instead return a completely new modified object.

**Properties of SolidFill:**
  * `color`: fill color. Construct a _LCJS color_ using one of the many available _factories_ : `ColorRGBA`, `ColorHEX`, `ColorCSS`, `ColorHSV`.

**SolidFill Usage:**
Use SolidFill with:
  * `setFillStyle` methods:
    * `PointSeries.setPointFillStyle`
    * `setTitleFillStyle`

```javascript
 // Example, style points fill with solid red color.  
 PointSeries.setPointFillStyle(new SolidFill({
     color: ColorRGBA( 255, 0, 0 )
 }))
```

  * Creating a `SolidLine`, or other _line style_, which can be used for styling a stroke, or border.

_Watch out!_ A common misuse is to attempt styling strokes or borders directly using _fill style_ or _color_. Remember, when calling a `setStrokeStyle` method, a _line style_ is expected! Carefully observe the order of wrapped styles: _line style <- fill style <- color_

```javascript
 // Example, style line series stroke with solid red line.  
 LineSeries.setStrokeStyle(new SolidLine({
     thickness: 1,
     fillStyle: new SolidFill({ color: ColorRGBA( 255, 0, 0 ) })
 }))
```

**Related information:**
For more _fill styles_, see: `emptyFill`, `IndividualPointFill`, `PalettedFill`, `RadialGradientFill`, `LinearGradientFill`, `ImageFill`.

#### Hierarchy
  * `VisibleFill`
    * `SolidFill`

##### Index
### Constructors
* constructor

### Properties
* color
* fillType
* type

### Methods
* getColor
* setA
* setB
* setColor
* setG
* setR
* toCSS

## Constructors
### constructor
  * `new SolidFill(props?: Partial<VisibleFillStyleProperties>): SolidFill`
  * Construct a SolidFill object, specifying any amount of its properties.

```javascript
 // Example using RGBA color factory.  
 const solidRed = new SolidFill({
     color: ColorRGBA( 255, 0, 0 )
 })
```

```javascript
 // Example using HEX color factory.  
 const solidRed = new SolidFill({
     color: ColorHEX( '#ff0000' )
 })
```

#### Parameters
    * ##### `Optional` props: Partial<VisibleFillStyleProperties>
Object containing any amount of SolidFill properties.
#### Returns `SolidFill`

## Properties
### `Readonly` color
  * `color`: Color
  * For SolidFill: Color which is used to fill shape.
  * For IndividualPointFill: Fallback Color for filling shape if individual Color was not given.
  * For PalettedFill: Fallback Color for filling shape if palette was not given.

### `Readonly` fillType
  * `fillType`: "image" | "solid" | "radial-gradient" | "linear-gradient" | "individual" | "palette"

### `Readonly` type
  * `type`: "fillstyle"

## Methods
### getColor
  * `getColor(): Color`
  * Get color of SolidFill.
### Returns `Color` object
#### Returns `Color`


### setA
  * `setA(alpha: number): SolidFill`
  * Construct a new SolidFill object based on this one, but with a modified Alpha value.
### Returns `New SolidFill object`
#### Parameters
    * ##### `alpha`: number
Value of Alpha channel [0-255]
#### Returns `SolidFill`


### setB
  * `setB(blue: number): SolidFill`
  * Construct a new SolidFill object based on this one, but with a modified Blue value.
### Returns `New SolidFill object`
#### Parameters
    * ##### `blue`: number
Value of Blue channel [0-255]
#### Returns `SolidFill`


### setColor
  * `setColor(value: Color | ImmutableMutator<Color, Color>): SolidFill`
  * Construct a new SolidFill object based on this one, but with modified color.
Example:
```javascript
// specify new color  
solidfill.setColor( ColorHEX('#F00') )
  
// change individual color properties  
solidfill.setColor( color => color.setA(80) )
```

### Returns `New SolidFill object`
#### Parameters
    * ##### `value`: Color | ImmutableMutator<Color, Color>
Either a Color object or a function, which will be used to create a new Color based on current value.
#### Returns `SolidFill`


### setG
  * `setG(green: number): SolidFill`
  * Construct a new SolidFill object based on this one, but with a modified Green value.
### Returns `New SolidFill object`
#### Parameters
    * ##### `green`: number
Value of Green channel [0-255]
#### Returns `SolidFill`


### setR
  * `setR(red: number): SolidFill`
  * Construct a new SolidFill object based on this one, but with a modified Red value.
### Returns `New SolidFill object`
#### Parameters
    * ##### `red`: number
#### Returns `SolidFill`


### toCSS
  * `toCSS(): string`
  * Get CSS representation of the FillStyle.
#### Returns `string`


###  Settings

```

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

### Create PointSeries3D with Options

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/PointSeries3D

Demonstrates how to create a PointSeries3D instance with specific configurations, such as enabling individual data point sizing. This method allows for pre-setting properties during initialization.

```javascript
// Example,  
 const pointSeries3D = Chart3D.addPointSeries({
     // Enable individual data points size. 
     individualPointSizeEnabled: true 
 })

```

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

### Get Heatmap Start Coordinate (XZ)

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/SurfaceScrollingGridSeries3D

Retrieves the starting coordinate of the Heatmap on its X and Z axes. This indicates where the first heatmap sample will be positioned.

```javascript
getStart(): PointXZ
```

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

### Get Series Start Point

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/HeatmapScrollingGridSeriesIntensityValues

Retrieves the starting point (X, Y coordinates) used for drawing the HeatmapScrollingGridSeriesIntensityValues. This is relevant for defining the initial position or offset of the heatmap grid.

```javascript
const heatmapSeries = chart.addHeatmapScrollingGridSeries();
const start = heatmapSeries.getStart();
console.log(start);
```

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

### SurfaceGridSeries3D Creation

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/SurfaceGridSeries3D

Demonstrates how to create a SurfaceGridSeries3D with initial configuration options.

```APIDOC
## POST /api/charts/surfacegrids

### Description
Creates a new SurfaceGridSeries3D with specified columns and rows.

### Method
POST

### Endpoint
/api/charts/surfacegrids

### Parameters
#### Request Body
- **columns** (number) - Required - The number of columns in the grid.
- **rows** (number) - Required - The number of rows in the grid.

### Request Example
{
  "columns": 100,
  "rows": 200
}

### Response
#### Success Response (200)
- **seriesId** (string) - The unique identifier for the created series.

#### Response Example
{
  "seriesId": "surfaceGrid123"
}
```

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

### Add Event Listener Examples

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/BarChart

Shows how to add event listeners to chart objects. Includes examples for basic event handling, accessing interaction info, and creating one-time listeners.

```javascript
// Example syntax  
object.addEventListener('click', (event) => {  
    console.log(event)
})

```

```javascript
// Most series share information about interacted data point  
series.addEventListener('click', (event, info) => {  
    console.log(info)
})

```

```javascript
// Example this listener will only fire once  
object.addEventListener('click', (event) => {})

```

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

### Get Angle Interval

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/GaugeChart

Retrieves the start and end angles of the gauge.

```APIDOC
## GET /api/gauge/angle-interval

### Description
Retrieves the start and end angles of the gauge.

### Method
GET

### Endpoint
/api/gauge/angle-interval

### Parameters
None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **start** (number) - The starting angle of the gauge.
- **end** (number) - The ending angle of the gauge.

#### Response Example
```json
{
  "start": 0,
  "end": 360
}
```
```

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

### Pie Chart Configuration Examples

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/PieOptions

Demonstrates how to configure pie charts using the PieOptions interface, including default and custom type settings.

```javascript
// Pie Chart with default type
undefined
// Pie Chart* with specified type
{ pieChartOptions: { type: PieChartTypes.PieChartWithLabelsOnSides } }
```

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

### defaultAxisX Configuration Examples

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/ChartOptions

Provides examples for configuring the default X-axis, including positioning it on the opposite side and setting it as a logarithmic axis.

```APIDOC
## Optional defaultAxisX

### Description
Interface for specifying Axis X configurations that can't be changed after creation of the Axis.

### Request Example
```javascript
// Configure default X Axis of chart on opposite side to default configuration (top).
ChartXY({
    defaultAxisX: {
        opposite: true,
    }
});

// Configure default X Axis of chart as logarithmic (10 base).
ChartXY({
    defaultAxisX: {
        type: 'logarithmic',
        base: 10,
    }
});
```

**Note**: Not all series types support logarithmic axes! Attaching a non-supported Series will crash the application.

List of series that support logarithmic Axes:
  * LineSeries
  * PointSeries
  * PointLineSeries
  * StepSeries
  * SplineSeries
  * AreaSeries
  * AreaRangeSeries
  * OHLCSeries (Y Axis can be logarithmic, but not X Axis)
  * RectangleSeries
  * SegmentSeries

List of series that do **not** support logarithmic Axes:
  * HeatmapGridSeriesIntensityValues
  * HeatmapScrollingGridSeriesIntensityValues
  * PolygonSeries
```

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

### Serve LightningChart JS Resources Locally

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/LightningChartOptions

Shows how to set up a local file server using `http-server` to serve LightningChart JS resources, typically for features like MapChart or OnScreenMenu.

```bash
npm i --global http-server
cd node_modules/@lightningchart/lcjs/dist/resources
http-server --cors
```

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

### getStart

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/SurfaceGridSeries3D

Gets the start coordinate of a Heatmap series on its X and Z axes.

```APIDOC
## GET getStart

### Description
Get start coordinate of Heatmap on its X and Z axis.

### Method
GET

### Endpoint
/getStart

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
```
// No request body for GET methods
```

### Response
#### Success Response (200)
- **return value** (PointXZ) - Coordinate on axis where 1st heatmap sample will be positioned.

#### Response Example
```json
{
  "returnValue": {
    "x": 0,
    "z": 0
  }
}
```
```

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

### Get Interval

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/GaugeChart

Retrieves the start and end values of the gauge's interval.

```APIDOC
## GET /api/gauge/interval

### Description
Retrieves the start and end values of the gauge's interval.

### Method
GET

### Endpoint
/api/gauge/interval

### Parameters
None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **start** (number) - The starting value of the interval.
- **end** (number) - The ending value of the interval.

#### Response Example
```json
{
  "start": 0,
  "end": 100
}
```
```

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

### PointSeries3D Creation

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/PointSeries3D

Demonstrates how to create a PointSeries3D instance with optional configurations.

```APIDOC
## PointSeries3D Creation

### Description
Demonstrates how to create a `PointSeries3D` instance with optional configurations.

### Method
`Chart3D.addPointSeries(options?: PointSeries3DOptions)`

### Parameters
#### Request Body
- **individualPointSizeEnabled** (boolean) - Optional - Enable individual data points size.

### Request Example
```javascript
const pointSeries3D = Chart3D.addPointSeries({
    individualPointSizeEnabled: true
});
```
```

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

### getInterval

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/ParallelCoordinateAxis

Gets the currently applied axis scale interval, including the start and end values.

```APIDOC
## getInterval

### Description
Get the currently applied axis scale interval.

### Method
GET

### Endpoint
/getInterval

### Parameters
None

### Request Example
```json
{
  "query": "getInterval"
}
```

### Response
#### Success Response (200)
- **result** (AxisInterval) - An object containing the current start and end of the axis interval.

#### Response Example
```json
{
  "result": {
    "start": 50,
    "end": 150
  }
}
```
```

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

### Get Axis Margins

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/Axis

Retrieves the start and end margins set for the axis, as previously configured with a `setMargins` method.

```javascript
const margins = chart.getAxisX().getMargins();
console.log('Start margin:', margins.start, 'End margin:', margins.end);
```

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

### NumericTickStrategy Constructor

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/NumericTickStrategy

Initializes a new instance of NumericTickStrategy.

```APIDOC
## Constructors

### constructor
  * new NumericTickStrategy(values?: Iterable<[string, unknown]> | Partial<NumericTickStrategyProperties>): NumericTickStrategy
  * #### Parameters
    * ##### `Optional` values: Iterable<[string, unknown]> | Partial<NumericTickStrategyProperties>
#### Returns NumericTickStrategy
```

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

### Create Pie Chart with Default Configuration

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/PieChartOptions

Shows the basic way to create a pie chart using the LightningChart JS API with default settings. This is the simplest initialization for a pie chart.

```javascript
const chart = LightningChart.Pie({})
```

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

### Get Axis Interval

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/Axis

Retrieves the current scale interval of the axis, returning an object with the start and end values.

```javascript
chart.getAxisY().getInterval();
```

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

### getInterval - Get Current Axis Interval

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/PolarAxis

Retrieves the currently applied interval (start and end points) of the axis scale.

```APIDOC
## getInterval

### Description
Get the currently applied axis scale interval.

### Method
GET

### Endpoint
/websites/lightningchart_js-charts_api-documentation_v8_0_2

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

#### Query Parameters
- None

#### Request Body
- None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **interval** (AxisInterval) - An object containing the current start and end of the Axis.

#### Response Example
```json
{
  "interval": {
    "start": 10,
    "end": 50
  }
}
```
```

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

### LightningChart JS Initialization Configuration

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/LightningChartOptions

Configuration options for initializing LightningChart JS, including canvas rendering, styling, and device pixel ratio.

```APIDOC
## Initialization Configuration Options

### `Optional` antialias?: boolean
Set preference for anti-aliasing. If set to true or undefined and browser supports anti-aliasing then the chart will be anti-aliased. If set to false or browser doesn't support anti-aliasing then the chart will not be anti-aliased.

### `Optional` canvas?: string | HTMLCanvasElement
Provide specific canvas element to use for rendering. Allows for more complex layout scenarios. Needed when HTML content is both under and above the charts.

### `Optional` devicePixelRatio?: number | boolean
Device pixel ratio to use for composing the charts to final canvas. Can be different from the pixel ratio used to render the charts.

### `Optional` noCanvasStyles?: boolean
Prevent LCJS from adding its default CSS styles to the canvas element. Can be useful in more complex layout scenarios.

### `Optional` noCanvasTransform?: boolean
Disable LCJS automatically moving the canvas with scrolling to keep it in static position relative to browser viewport. Can be useful in more complex layout scenarios.

### `Optional` useIndividualCanvas?: boolean
Enable the usage of individual canvas rendering. This rendering method provides better support for more complex web site layouts. The tradeoff is that on some browsers it adds significant overhead slowing down rendering. When enabled, each chart will have it's own canvas placed inside of the given container. This allows normal CSS and HTML layout usage to create complex overlapping layouts. The default rendering method uses a single canvas to render all charts. This provides a lot more consistent performance but comes with the drawback of making overlapping layouts harder to do and sometimes impossible.

### `Optional` useStackingOrder?: boolean
Disable automatic stacking order updates. Only used when not using individual canvas rendering method. This can improve performance on large dom trees when stacking of charts on top of each other is not required. Set to `false` to disable. Enabled by default.
```

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

### Get Scroll Margins

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/Axis

Retrieves the scroll margin configuration for the axis. This can be a boolean or an object specifying start and end margins for scrolling.

```javascript
const scrollMargins = chart.getAxisX().getScrollMargins();
if (typeof scrollMargins === 'object') {
  console.log('Scroll margins:', scrollMargins.start, scrollMargins.end);
} else {
  console.log('Scroll margins:', scrollMargins);
}
```

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

### Create Gauge Chart with Options

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/GaugeChart

Demonstrates how to create a Gauge Chart instance using the lightningChart() constructor with specific chart options. This is the foundational step for visualizing data with a gauge.

```javascript
const chart = lightningChart().GaugeChart({
   // Chart options
})
```

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

### SurfaceGridSeries3D - Methods

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/SurfaceGridSeries3D

Documentation for various methods available on the SurfaceGridSeries3D object.

```APIDOC
## PUT /api/charts/surfacegrids/{seriesId}/heightmap

### Description
Invalidates and specifies the cell height data for the SurfaceGridSeries3D.

### Method
PUT

### Endpoint
/api/charts/surfacegrids/{seriesId}/heightmap

### Parameters
#### Path Parameters
- **seriesId** (string) - Required - The ID of the SurfaceGridSeries3D.
#### Request Body
- **heightData** (Array<Array<number>>) - Required - A 2D array representing the height data for each cell.

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
{
  "message": "Height map updated successfully."
}

## PUT /api/charts/surfacegrids/{seriesId}/intensityvalues

### Description
Invalidates and specifies the cell intensity data for the SurfaceGridSeries3D.

### Method
PUT

### Endpoint
/api/charts/surfacegrids/{seriesId}/intensityvalues

### Parameters
#### Path Parameters
- **seriesId** (string) - Required - The ID of the SurfaceGridSeries3D.
#### Request Body
- **intensityData** (Array<Array<number>>) - Required - A 2D array representing the intensity data for each cell.

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
{
  "message": "Intensity values updated successfully."
}

## PUT /api/charts/surfacegrids/{seriesId}/fillstyle

### Description
Configures the fill style for the SurfaceGridSeries3D.

### Method
PUT

### Endpoint
/api/charts/surfacegrids/{seriesId}/fillstyle

### Parameters
#### Path Parameters
- **seriesId** (string) - Required - The ID of the SurfaceGridSeries3D.
#### Request Body
- **fillStyle** (object) - Required - The fill style configuration.

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
{
  "message": "Fill style configured successfully."
}

## PUT /api/charts/surfacegrids/{seriesId}/wireframestyle

### Description
Configures the wireframe style for the SurfaceGridSeries3D.

### Method
PUT

### Endpoint
/api/charts/surfacegrids/{seriesId}/wireframestyle

### Parameters
#### Path Parameters
- **seriesId** (string) - Required - The ID of the SurfaceGridSeries3D.
#### Request Body
- **wireframeStyle** (object) - Required - The wireframe style configuration.

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
{
  "message": "Wireframe style configured successfully."
}

## PUT /api/charts/surfacegrids/{seriesId}/intensityinterpolation

### Description
Configures the intensity interpolation for the SurfaceGridSeries3D.

### Method
PUT

### Endpoint
/api/charts/surfacegrids/{seriesId}/intensityinterpolation

### Parameters
#### Path Parameters
- **seriesId** (string) - Required - The ID of the SurfaceGridSeries3D.
#### Request Body
- **interpolationMode** (string) - Required - The intensity interpolation mode (e.g., 'linear', 'nearestNeighbor').

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
{
  "message": "Intensity interpolation configured successfully."
}

## PUT /api/charts/surfacegrids/{seriesId}/cullmode

### Description
Configures the cull mode for the SurfaceGridSeries3D.

### Method
PUT

### Endpoint
/api/charts/surfacegrids/{seriesId}/cullmode

### Parameters
#### Path Parameters
- **seriesId** (string) - Required - The ID of the SurfaceGridSeries3D.
#### Request Body
- **cullMode** (string) - Required - The cull mode (e.g., 'front', 'back', 'disabled').

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
{
  "message": "Cull mode configured successfully."
}

## DELETE /api/charts/surfacegrids/{seriesId}

### Description
Destroys the SurfaceGridSeries3D permanently.

### Method
DELETE

### Endpoint
/api/charts/surfacegrids/{seriesId}

### Parameters
#### Path Parameters
- **seriesId** (string) - Required - The ID of the SurfaceGridSeries3D to destroy.

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
{
  "message": "SurfaceGridSeries3D destroyed successfully."
}
```

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

### getScrollMargins - Get Scroll Margins Configuration

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/PolarAxis

Retrieves the configuration for scroll margins, which can be a boolean or an object specifying start and end margins.

```APIDOC
## getScrollMargins

### Description
Get value of setScrollMargins

### Method
GET

### Endpoint
/websites/lightningchart_js-charts_api-documentation_v8_0_2

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

#### Query Parameters
- None

#### Request Body
- None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **scrollMargins** (boolean | object) - The scroll margins configuration. Can be a boolean or an object with `start` and `end` properties.

#### Response Example
```json
{
  "scrollMargins": {
    "start": 5,
    "end": 10
  }
}
```
```

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

### Get Y-Axis Minimum Value

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/HeatmapScrollingGridSeriesIntensityValues

Retrieves the minimum value configured for the Y-axis of the HeatmapScrollingGridSeriesIntensityValues. This typically relates to the start of the data displayed vertically.

```javascript
const heatmapSeries = chart.addHeatmapScrollingGridSeries();
const minY = heatmapSeries.getYMin();
console.log(minY);
```

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

### AxisStrategy3D Interface

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/AxisStrategy3D

Details about the AxisStrategy3D interface, its inheritance, and settings.

```APIDOC
## Interface AxisStrategy3D

### Description
Interface for a strategy which represents the logic that is different between X, Y and Z Axes.

### Hierarchy
  * AbstractAxisStrategy
    * AxisStrategy3D

### Settings
#### Member Visibility
  * Protected
  * Inherited

#### Theme
OSLightDark
```

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

### Get X-Axis Minimum Value

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/HeatmapScrollingGridSeriesIntensityValues

Retrieves the minimum value configured for the X-axis of the HeatmapScrollingGridSeriesIntensityValues. This typically relates to the start of the data displayed horizontally.

```javascript
const heatmapSeries = chart.addHeatmapScrollingGridSeries();
const minX = heatmapSeries.getXMin();
console.log(minX);
```

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

### Initialize LightningChart JS

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/functions/lightningChart-1

Initializes the LightningChart JS library and returns the main interface for creating charts and dashboards. Supports optional licensing information.

```APIDOC
## Function lightningChart

### Description
Function for initializing the LightningChart library. Returns the main interface of LCJS, which is used to create all top level components - _charts_ and _dashboards_.

### Method
POST

### Endpoint
/

### Parameters
#### Request Body
- **license** (string) - Optional - License number for the chart.
- **licenseInformation** (object) - Optional - Additional information for license verification, particularly for Application Deployment licenses.

### Request Example
```javascript
 const lcjs = lightningChart({
     // Either supply license number, or omit for automatic community license.
     license: 'my-license-number'
 })

 // Create charts...
 const chart = lcjs.ChartXY()
```

### Response
#### Success Response (200)
- **LightningChart** (object) - A LightningChart object for creating Charts and components.

#### Response Example
```json
{
  "message": "LightningChart initialized successfully"
}
```

### Error Handling
- **400** - Invalid license information.
- **500** - Internal server error during initialization.
```

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

### SpiderChartOptions Configuration

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/SpiderChartOptions

Demonstrates creating a SpiderChart with various configuration options, including theme and cursor builders.

```APIDOC
## POST /api/spiderchart

### Description
Configures a SpiderChart with specified options.

### Method
POST

### Endpoint
/api/spiderchart

### Parameters
#### Request Body
- **theme** (Themes) - Optional - Specify chart color theme.
- **animationsEnabled** (boolean) - Optional - Convenience flag to disable all animations from chart.
- **cursorBuilder** (CursorBuilder2D) - Optional - Builder for the charts' auto cursor.
- **legend** (LegendOptions) - Optional - Configuration for the chart legend.

### Request Example
{
  "theme": "Themes.light",
  "animationsEnabled": false
}

### Response
#### Success Response (200)
- **chartId** (string) - The ID of the created SpiderChart.

#### Response Example
{
  "chartId": "spiderchart-12345"
}
```

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

### Get Scroll Margins Configuration

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/BarChartValueAxis

Retrieves the configuration for scroll margins, which can be a boolean or an object specifying start and end margins.

```javascript
axis.getScrollMargins(): boolean | { end: number; start: number; }
```

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

### Create ChartXY with Default Configuration

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/ChartXYOptions

Illustrates the creation of a ChartXY instance using default settings. This is the simplest way to initialize a chart without any specific configurations.

```javascript
const chart = LightningChart.ChartXY({})
```

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

### Get Current Axis Interval

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/BarChartValueAxis

Returns an object containing the start and end values of the currently applied interval on the axis.

```javascript
axis.getInterval(): AxisInterval
```

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

### Get Axis Scroll Margins Configuration

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/ParallelCoordinateAxis

Retrieves the scroll margins configuration for an axis. This can be a boolean or an object specifying start and end margins.

```javascript
getScrollMargins(): boolean | {
  end: number;
  start: number;
}
```

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

### Create Pie Chart with Light Theme

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/PieChartOptions

Demonstrates how to create a new pie chart instance with a specified light color theme. This is useful for setting a consistent visual style for the chart.

```javascript
const chart = LightningChart.Pie({
    theme: Themes.light,
})
```

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

### Get Current Axis Interval (JavaScript)

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/ParallelCoordinateAxis

Retrieves an object containing the current start and end values of the axis's scale interval.

```javascript
const interval = axis.getInterval();
```

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

### Initialize LightningChart JS

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/functions/lightningChart-1

Initializes the LightningChart JS library, returning the main interface for creating charts and dashboards. Supports optional license information via configuration object or deprecated string format.

```javascript
const lcjs = lightningChart({
     // Either supply license number, or omit for automatic community license.  
     // license: 'my-license-number'
 })

 // Create charts...
 const chart = lcjs.ChartXY()
```

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

### Get Scroll Margins

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/BarChartCategoryAxis

Retrieves the configured scroll margins for the axis. This can be a boolean value or an object specifying the start and end scroll margins.

```typescript
getScrollMargins(): boolean | {
end: number;
start: number;
}
```

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

### TextBox Usage

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/variables/UIElementBuilders

Example of how to create a TextBox UI element.

```APIDOC
## POST /chart/addUIElement

### Description
Adds a UI element to the chart using the specified builder.

### Method
POST

### Endpoint
/chart/addUIElement

### Request Body
- **builder** (UITextBoxBuilder) - Required - The builder for the TextBox UI element.

### Request Example
```json
{
  "builder": "UIElementBuilders.TextBox"
}
```

### Response
#### Success Response (200)
- **uiElementId** (string) - The ID of the created UI element.

#### Response Example
```json
{
  "uiElementId": "textBox123"
}
```
```

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

### GaugeChart Creation

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/GaugeChart

Demonstrates how to create a Gauge Chart with specific options.

```APIDOC
## POST /GaugeChart

### Description
Creates a Gauge Chart with customizable options to visualize a single value within an interval.

### Method
POST

### Endpoint
/GaugeChart

### Parameters
#### Request Body
- **options** (object) - Optional - Configuration options for the Gauge Chart.

### Request Example
```json
{
  "options": {
    "interval": {
      "start": 0,
      "end": 100
    },
    "bar": {
      "thickness": 10
    }
  }
}
```

### Response
#### Success Response (200)
- **chart** (GaugeChart) - The newly created GaugeChart instance.

#### Response Example
```json
{
  "chart": "[GaugeChart Instance]"
}
```
```

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

### Get Title Effect

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/TreeMapChart

Checks if a theme effect is enabled for the chart title. Example shows disabling effect. Returns a boolean.

```javascript
getTitleEffect(): boolean
```

```javascript
Component.setEffect(false)
```

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

### Create and Populate DataSetXY

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/DataSetXY

Demonstrates the creation of a DataSetXY object with a specified schema and the subsequent appending of sample data.

```javascript
// Example, create a data set object.  
 const dataSet = new DataSetXY({
     schema: {
         x: { pattern: 'progressive' },
         temperature: { pattern: null }
     }
 })
PointLineAreaSeries.setDataSet(dataSet)
dataSet.appendSamples({
     x: [0, 1, 2],
     temperature: [0, 5, 2],
 })
```

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

### Get Node Effect

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/TreeMapChart

Checks if a theme effect is enabled for a chart component. Example shows disabling effect. Returns a boolean.

```javascript
getNodeEffect(): boolean
```

```javascript
Component.setEffect(false)
```

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

### Get Boundaries of a LightningChart JS Series

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/AreaRangeSeries

Provides an example of retrieving the boundaries of a series, likely representing the data range covered by the series.

```javascript
getBoundaries()
```

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

### LightningChartOptions Interface

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/LightningChartOptions

Configuration interface for initializing LightningChart JS before creating charts or series. It allows setting license information, resource base URLs, and shared context options.

```APIDOC
## Interface LightningChartOptions

Interface for configuring LightningChart JS initialization, before any charts or series are created.
Supplied when `lightningChart` function is called:
```javascript
 const lcjs = lightningChart({
     // Either supply license number, or omit for automatic community license.
     // license: 'my-license-number'
 })

 // Create charts...
 const chart = lcjs.ChartXY()
```

### Properties

*   **license** (`string`, optional): Optional development or deployment license. If omitted, a community license will be used.
*   **licenseInformation** (`AppDeploymentLicenseInformation`, optional): Additional information for license verification. Only required by Application Deployment license.
*   **resourcesBaseUrl** (`string`, optional): Specify URL path to file server that hosts LightningChart JS resources. Required for features like MapChart, OnScreenMenu, and Themes with background pictures. Examples provided for setting up a local file server with `http-server` and for Node.js environments using `fs:` syntax.
*   **sharedContextOptions** (`object`, optional): Options for shared context rendering, including `antialias`, `canvas`, `devicePixelRatio`, `noCanvasStyles`, `noCanvasTransform`, `useIndividualCanvas`, and `useStackingOrder`.
```

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

### Get Scroll Margins Configuration (LightningChart JS)

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/GenericAxis

Retrieves the scroll margins configuration for the axis. This can be a boolean or an object specifying start and end margins.

```javascript
axis.getScrollMargins(): boolean | { start: number; end: number; }
```

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

### VisibleFill Constructor

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/VisibleFill

Information on how to instantiate the VisibleFill class, including optional parameters.

```APIDOC
## Constructors
### constructor
  * new VisibleFill(values?: Iterable<[string, unknown]> | Partial<VisibleFillStyleProperties>): VisibleFill
  * #### Parameters
    * ##### `Optional` values: Iterable<[string, unknown]> | Partial<VisibleFillStyleProperties>
#### Returns VisibleFill
```

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

### Get Theme Effect State

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/PolarPointLineSeries

Retrieves whether the theme effect is enabled or disabled for a component. Returns a boolean. Example provided shows disabling the effect.

```javascript
getEffect(): boolean

// Example, disable theme effect from a particular component.  
Component.setEffect(false)
```

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

### Create ChartXY with Light Theme

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/ChartXYOptions

Shows how to initialize a ChartXY with a specific color theme, in this case, the 'light' theme. This allows customization of the chart's visual appearance from the outset.

```javascript
const chart = LightningChart.ChartXY({
    theme: Themes.light
})
```

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

### Create PyramidChart with Default Configuration

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/PyramidChartOptions

Shows how to initialize a PyramidChart using its default configuration settings. This is the simplest way to create a chart if no specific customizations are needed.

```javascript
const chart = LightningChart.Pyramid({})
```

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

### Axis Current Interval

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/Axis3D

Gets the currently applied interval (range) of the axis. The returned object contains the start and end values of the current axis scale.

```javascript
Axis.getInterval(): AxisInterval
```

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

### Configure resourcesBaseUrl with Local Server

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/LightningChartOptions

Illustrates how to set the `resourcesBaseUrl` option when initializing LightningChart JS to point to a locally hosted resource server.

```javascript
const lcjs = lightningChart({
     resourcesBaseUrl: 'http://127.0.0.1:8081' // <--- or whichever port http-server assigned.
 })
```

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

### Get Interval Restrictions (JavaScript)

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/ParallelCoordinateAxis

Retrieves the current restrictions applied to the axis interval, such as minimum or maximum values for the interval start, end, or duration. By default, no restrictions are applied.

```javascript
const restrictions = axis.getIntervalRestrictions();
```

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

### Serve LightningChart JS Resources with CORS

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/LightningChartOptions

Demonstrates the command to start `http-server` with the `--cors` flag, which is essential for avoiding CORS issues when hosting LightningChart JS resources.

```bash
cd node_modules/@lightningchart/lcjs/dist/resources
http-server --cors
```

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

### Get Axis Interval Restrictions

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/Axis

Retrieves the current restrictions set for the axis interval, including minimum and maximum values for start, end, and the interval itself. Returns undefined if no restrictions are set.

```javascript
const restrictions = chart.getAxisX().getIntervalRestrictions();
if (restrictions) {
  console.log('Interval Min:', restrictions.intervalMin);
}
```

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

### Chart3D Initialization

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/interfaces/ChartOptions3D

Demonstrates how to initialize a LightningChart JS 3D chart with various configuration options.

```APIDOC
## POST /api/chart3d

### Description
Initializes a new 3D chart instance with specified configuration options.

### Method
POST

### Endpoint
/api/chart3d

### Parameters
#### Request Body
- **theme** (object) - Optional - Specifies the chart color theme. Available themes include `Themes.light` and `Themes.dark`.
- **animationsEnabled** (boolean) - Optional - A flag to enable or disable all animations in the chart.
- **cursorBuilder** (object) - Optional - Configures the chart's automatic cursor behavior. Use `CursorBuilders.D3` for customization.
- **legend** (object) - Optional - Configuration options for the chart legend, including custom legend logic.

### Request Example
```json
{
  "theme": "Themes.light",
  "animationsEnabled": false,
  "cursorBuilder": {
    "resultTableBackground": "UIBackgrounds.Circle"
  },
  "legend": {
    "enabled": true
  }
}
```

### Response
#### Success Response (200)
- **chartInstance** (object) - A reference to the newly created 3D chart instance.

#### Response Example
```json
{
  "chartInstance": "[chart object reference]"
}
```
```

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

### Get Current Axis Interval (JavaScript)

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/PolarAxisAmplitude

Retrieves the currently applied interval (start and end points) of the axis scale. This provides insight into the currently visible range of the axis.

```javascript
const currentInterval = axis.getInterval();
```

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

### Get Theme Effect Enabled Status

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/ParallelCoordinateSeries

Checks if the theme effect is enabled for a specific component. Theme effects add visual enhancements like glow. Example shows how to disable it.

```javascript
// Example, disable theme effect from a particular component. 
Component.setEffect(false)

getEffect(): boolean
```

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

### FontSettings Constructor

Source: https://lightningchart.com/js-charts/api-documentation/v8.0.2/classes/FontSettings

Information on how to construct a new FontSettings object, including its parameters and an example.

```APIDOC
## Constructors
### constructor
  * new FontSettings(props?: Partial<FontProperties>): FontSettings
  * Construct a FontSettings object, specifying any amount of its properties.
```
 // Example,  
 const font = new FontSettings({
     size: 20,
     family: 'Arial, Helvetica, sans-serif',
     weight: 'bold',
     style: 'italic',
 })

```

#### Parameters
    * ##### `Optional` props: Partial<FontProperties>
Object containing any amount of SolidFill properties.
#### Returns FontSettings
```
Tokens:
Raw