### 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): 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 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): 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 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): NumericTickStrategy * #### Parameters * ##### `Optional` values: Iterable<[string, unknown]> | Partial #### 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>) - 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>) - 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): VisibleFill * #### Parameters * ##### `Optional` values: Iterable<[string, unknown]> | Partial #### 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): 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 Object containing any amount of SolidFill properties. #### Returns FontSettings ```