Readonly engineInterface for end user API of the LCJS engine. It provides some useful capabilities over the area enclosed by a single LCJS context (which can be just a single chart, or a Dashboard with several charts).
Scale for panel area in pixels.
Scale for panel area in percentages (0-100).
Add a Area series to the PolarChart.
PolarAreaSeries are used to render a list of PolarPoints by filling the enclosed area.
Example usage:
const areaSeries = polarChart.addAreaSeries()
.setData(
new Array( 90 ).fill( 0 ).map(( _, i ) => ({
angle: i,
amplitude: 60 + 25 * Math.cos( 5 * i * Math.PI / 180 )
}))
)
const areaSeries = polarChart.addAreaSeries()
.setConnectDataAutomaticallyEnabled(true)
.setData(
new Array(360).fill(0).map((_, i) => ({
angle: i,
amplitude: 60 + 25 * Math.cos((5 * i * Math.PI) / 180),
})),
)
Add a legendbox.
Legendbox is a type of UI element, that floats inside the chart/component it is created inside. It can be freely moved around with user interactions, as well as positioned in application code.
The purpose of legendbox is to describe the series and other visual components of the chart, by displaying their names and colors. Hovering over a series' legendbox entry will highlight that series, and clicking on the entry will toggle that series' visibility.
Legendbox alignment:
Alignment of legendbox can be selected by supplying one of the available LegendBoxBuilders to addLegendBox:
// Default (vertical) LegendBox.
const legendBox = ChartXY.addLegendBox()
// Horizontal LegendBox.
const horizontalLegendBox = ChartXY.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
Custom Legendbox positioning:
By default LegendBoxes are placed on the right side, or bottom of the chart (depending on alignment).
A custom location can be configured with UIElement API:
Position coordinate system is specified when creating legendbox.
addLegendBox( LegendBoxBuilders.VerticalLegendBox )
// Position = [0, 100] as percentages.
.setPosition({ x: 50, y: 50 })
addLegendBox( LegendBoxBuilders.VerticalLegendBox, chart.pixelScale )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
LegendBox
LegendBoxBuilder. If omitted, VerticalLegendBox will be selected. Use LegendBoxBuilders for selection.
Optional parameter for altering the coordinate system used for positioning the LegendBox. Defaults to whole Chart in percentages [0, 100].
Add a Line series to the PolarChart.
PolarLineSeries are used to render a list of PolarPoints by a continuous line that can be styled arbitrarily.
Example usage:
const lineSeries = polarChart.addLineSeries().setData(
new Array( 90 ).fill( 0 ).map(( _, i ) => ({
angle: i,
amplitude: 60 + 25 * Math.cos( 5 * i * Math.PI / 180 )
}))
)
Add a Point Line series to the PolarChart.
PolarPointLineSeries are used to render a list of PolarPoints by a continuous line drawn between the points plus configurable shapes over each data point.
Example usage:
const pointLineSeries = polarChart.addPointLineSeries().setData(
new Array( 90 ).fill( 0 ).map(( _, i ) => ({
angle: i,
amplitude: 60 + 25 * Math.cos( 5 * i * Math.PI / 180 )
}))
)
Add a Point series to the PolarChart.
PolarPointSeries are used to render a list of PolarPoints by different shapes.
Example usage:
const pointSeries = polarChart.addPointSeries().setData(
new Array( 90 ).fill( 0 ).map(( _, i ) => ({
angle: i,
amplitude: 60 + 25 * Math.cos( 5 * i * Math.PI / 180 )
}))
)
Add a Polygon series to the PolarChart.
PolarPolygonSeries are used to render a collection of polygons inside the Polar coordinate system. They are especially useful for highlighting parts of the Polar coordinate system.
Example usage:
const polygonSeries = polarChart.addPolygonSeries()
let ang = 45
let amplitude = 50
const polygon = polygonSeries.addPolygon()
.setGeometry([
{ angle: (ang += 10), amplitude: (amplitude += 10) },
{ angle: (ang += 10), amplitude: (amplitude += 5) },
{ angle: (ang += 10), amplitude: (amplitude += 10) },
{ angle: (ang += 10), amplitude: (amplitude -= 5) },
{ angle: (ang += 10), amplitude: (amplitude += 5) },
{ angle: (ang += 5), amplitude: (amplitude -= 5) },
{ angle: (ang += 0), amplitude: (amplitude -= 10) },
{ angle: (ang -= 5), amplitude: (amplitude -= 5) },
{ angle: (ang -= 10), amplitude: (amplitude -= 10) },
{ angle: (ang -= 10), amplitude: (amplitude -= 5) },
{ angle: (ang -= 10), amplitude: (amplitude += 5) },
{ angle: (ang -= 10), amplitude: (amplitude += 10) },
])
Add a Sector highlighter to the PolarChart.
PolarSectors can be used to highlight areas in the polar coordinate system.
Add a stand-alone UIElement using a builder.
Example usage:
addUIElement( UIElementBuilders.TextBox )
// Position = [0, 100] as percentages.
.setPosition({ x: 50, y: 50 })
addUIElement( UIElementBuilders.TextBox, chart.pixelScale )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addUIElement( UIElementBuilders.TextBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
Object that fulfills interfaces: UIElementType (typeparam) and UIElement
Type of UIElement that is specified by 'builder'-parameter.
UIElementBuilder. If omitted, TextBoxBuilder will be selected. Use UIElementBuilders for selection.
Optional parameter for altering the coordinate system used for positioning the UIElement. Defaults to whole Chart in percentages [0, 100].
Permanently destroy the component.
To fully allow Garbage-Collection to free the resources used by the component, make sure to remove any references to the component and its children in application code.
let chart = ...ChartXY()
let axisX = chart.getDefaultAxisX()
// Dispose Chart, and remove all references so that they can be garbage-collected.
chart.dispose()
chart = undefined
axisX = undefined
Object itself for fluent interface
Iterate over each Axis of Chart.
Get PolarAxisAmplitude object that represents the PolarCharts amplitude dimension, which is depicted as a distance away from the Charts center.
Get reference to charts AutoCursor.
See AutoCursorXY for all available methods for configuring the AutoCursor.
AutoCursor.
Get AutoCursor behavior, from a collection of preset options (AutoCursorModes).
Active selection of AutoCursor behavior.
Get PolarAxisRadial object that represents the PolarCharts radial dimension, which is depicted as an angle on the Charts center.
Get reference to all series inside PolarChart.
List of Polar series.
Get theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Boolean that describes whether drawing the theme effect is enabled around the component or not.
Get theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Boolean that describes whether drawing the theme effect is enabled around the component or not.
Get font of Chart title.
FontSettings object
Subscribe to mouse-click event on Chart background
Subscribe to mouse-doubleClick event on Chart background
Subscribe to mouse-down event on Chart background
Subscribe to mouse-drag event on Chart background
Subscribe to mouse-drag start event on Chart background
Subscribe to mouse-drag stop event on Chart background
Subscribe to mouse-enter event on Chart background
Subscribe to mouse-leave event on Chart background
Subscribe to mouse-move event on Chart background
Subscribe to mouse-up event on Chart background
Subscribe to mouse-wheel event on Chart background
Subscribe to touch-end event on Chart background
Subscribe to touch-move event on Chart background
Subscribe to touch-start event on Chart background
Subscribe onDispose event.
This event is triggered whenever the Control (Dashboards and all chart types) is disposed.
// Example usage
Chart.onDispose(() => {
console.log('chert was disposed')
})
Chart.dispose()
Token of subscription
Handler function for event
Subscribe to resize event.
This event is triggered whenever the area of chart changes (due to document or dashboard resizing).
// Example usage,
ChartXY.onResize((chart, width, height, engineWidth, engineHeight) => {
console.log('Chart resized', 'width', width, 'height', height, 'engineWidth', engineWidth, 'engineHeight', engineHeight)
})
Token of subscription
Handler function for event
Subscribe to mouse-click event on Series Background
Subscribe to mouse-doubleClick event on Series Background
Subscribe to mouse-down event on Series Background
Subscribe to mouse-drag event on Series Background
Subscribe to mouse-drag start event on Series Background
Subscribe to mouse-drag stop event on Series Background
Subscribe to mouse-enter event on Series Background
Subscribe to mouse-leave event on Series Background
Subscribe to mouse-move event on Series Background
Subscribe to mouse-up event on Series Background
Subscribe to mouse-wheel event on Series Background
Subscribe to touch end event on Series Background
Subscribe to touch move event on Series Background
Subscribe to touch start event on Series Background
Capture rendered state in an image file. Prompts the browser to download the created file.
NOTE: The download might be blocked by browser/plugins as harmful. To prevent this, only call the method in events tied to user-interactions. From mouse-event handlers, for example.
Has two optional parameters which directly reference JavaScript API HTMLCanvasElement.toDataURL. For supported image formats, compression quality, Etc. refer to:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Example usage:
// Download 'screenshot.png'
Panel.saveToFile('screenshot')
// Attempt download 'maybeNotSupported.bmp'
Panel.saveToFile('maybeNotSupported', 'image/bmp')
// Attempt download jpeg.file with specified compression quality
Panel.saveToFile('fileName', 'image/jpeg', 0.50)
If 'type' is not supported by browser, an Error will be thrown.
Name of prompted download file as string. File extension shouldn't be included as it is automatically detected from 'type'-argument.
Optional type: stringA DOMString indicating the image format. The default format type is image/png.
Optional encoderOptions: numberA Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92.
Disable/enable all animations for the chart.
Chart itself for fluent interface.
Boolean value to enable/disable animations.
Style chart AutoCursor using a callback function.
// Example syntax
ChartXY.setAutoCursor((autoCursor) => autoCursor
// `autoCursor` is of type AutoCursorXY, use its API for styling the cursor.
.setGridStrokeXStyle(new SolidLine({
thickness: 1,
fillStyle: new SolidFill({ color: ColorRGBA( 255, 0, 0 ) })
}))
)
See AutoCursorXY for all available methods for configuring the AutoCursor.
Example usage:
// Example 1, disable Y Axis tick marker & grid line.
ChartXY.setAutoCursor((autoCursor) => autoCursor
.setTickMarkerYVisible(false)
.setGridStrokeYStyle(emptyLine),
)
// Example 2, style AutoCursor ResultTable.
ChartXY.setAutoCursor((autoCursor) => autoCursor
.setResultTable((resultTable) => resultTable
.setOrigin(UIOrigins.LeftTop)
.setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
.setTextFont((font) => font
.setSize(12)
.setFamily('sans-serif')
)
.setBackground((background) => background
.setFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 0) }))
)
)
)
// Example 3, style AutoCursor TickMarker X.
ChartXY.setAutoCursor((autoCursor) => autoCursor
.setTickMarkerX((tickMarker: UIPointableTextBox) => tickMarker
.setTextFont((font) => font.setWeight('bold'))
.setTextFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))
.setBackground((background) => background.setFillStyle(emptyFill).setStrokeStyle(emptyLine)),
)
)
Object itself for fluent interface.
Callback function that receives reference to the charts AutoCursor.
Set chart AutoCursor behavior, by selecting a preset option from AutoCursorModes.
Possible values:
AutoCursorModes.snapToClosest (default) | AutoCursor snaps to closest data point from mouse location.AutoCursorModes.onHover | AutoCursor is only shown when it is directly over a series. NOTE: Series mouse interactions must be enabled for this to work!AutoCursorModes.disabled | AutoCursor is disabled // Example, disable AutoCursor
ChartXY.setAutoCursorMode(AutoCursorModes.disabled)
Related information:
On series level, AutoCursor behavior can be configured individually for each series, and there are also more series specific options available.
Here is LineSeries for example:
'nearest-x', 'nearest', etc.).Object itself for fluent interface.
Selection of AutoCursor behavior.
Set FillStyle of chart background.
// Example usage,
ChartXY.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 80, 0, 0 ) }))
Related API:
Transparent chart backgrounds:
LightningChart JS charts can be configured to be fully or partially transparent.
// Example, partially transparent chart
// Engine background exists under all LCJS components. In case of Dashboard, there is only 1 shared engine background.
chart.engine.setBackgroundFillStyle(emptyFill)
// Chart background covers every 1 chart. In case of Dashboard, every chart has its own chart background.
chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
// Some charts also have a separate series background.
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
Object itself
FillStyle or function which mutates the active FillStyle.
Set LineStyle of chart background border stroke.
// Example usage,
ChartXY.setBackgroundStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA( 0, 255, 0 ) })
}))
Related API:
Object itself
LineStyle or function which mutates the active LineStyle.
Set if mouse-interactions on chart are enabled or not
Object itself
Boolean flag
Set padding around Chart in pixels.
// Example 1, specify complete padding (four sides).
ChartXY.setPadding({ left: 16, right: 16, top: 32, bottom: 8 })
// Example 2, specify only single padding.
ChartXY.setPadding({ right: 64 })
Object itself
Number with pixel margins for all sides or datastructure with individual pixel paddings for each side. Any side can be omitted, only passed values will be overridden.
Set theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Object itself.
Theme effect enabled
Set FillStyle of series background (area behind series).
// Example usage,
ChartXY.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 60, 0, 0 ) }))
Related API:
Transparent chart backgrounds:
LightningChart JS charts can be configured to be fully or partially transparent.
// Example, partially transparent chart
// Engine background exists under all LCJS components. In case of Dashboard, there is only 1 shared engine background.
chart.engine.setBackgroundFillStyle(emptyFill)
// Chart background covers every 1 chart. In case of Dashboard, every chart has its own chart background.
chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
// Some charts also have a separate series background.
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
Object itself
FillStyle or function which mutates the active FillStyle.
Set LineStyle of series background border stroke.
// Example usage,
ChartXY.setSeriesBackgroundStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA( 0, 255, 0 ) })
}))
Related API:
Object itself
LineStyle or function which mutates the active LineStyle.
Set the state for all Series in the Chart to highlight on mouse hover.
Object itself for fluent interface.
True if all Series should be highlighted on mouse hover, false if not.
Set text of Chart title.
Object itself for fluent interface.
Chart title as a string.
Set theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Object itself.
Theme effect enabled
Set fill style of Chart Title.
Example usage:
// Create a new style
Chart.setTitleFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
Chart.setTitleFillStyle((solidFill) => solidFill.setA(80))
// Set hidden
Chart.setTitleFillStyle(emptyFill)
Chart itself
Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
Set font of Chart Title.
Example usage:
// Create a new FontSettings
Chart.setTitleFont(new FontSettings({ size: 24, style: 'italic' }))
// Change existing settings
Chart.setTitleFont((fontSettings) => fontSettings.setWeight('bold'))
Chart itself
Either a FontSettings object or a function, which will be used to create a new FontSettings based on current value.
Specifies padding after chart title.
This does not have an effect if title is hidden (empty FillStyle).
// Example 2, specify margins for all sides with same value for Title.
ChartXY.setTitleMargin(40)
Chart itself for fluent interface
Gap after the chart title in pixels.
Set rotation of Chart title.
Object itself
Rotation in degrees
Solves the nearest data-point from series inside Chart of a given coordinate on screen
Undefined or data-structure for positioning of markers (and cursors)
Optional location: PointLocation on screen or omit for cur mouse location
Chart for visualizing data in a Polar coordinate system ( angle + amplitude ). It has a multitude of methods for adding various types of Series. For example:
PolarCharts Axes can be styled similarly as those of ChartXY. Refer to them via methods:
Charts are created by methods of LightningChart interface or a Dashboard.