Protected _isFlag that is set whenever Panel or any scale is resized.
Will be handled before plot to update scale and trigger resize event just once per frame.
Readonly backgroundInterface for attaching listeners to user interaction events (click, pointerenter, etc.) on chart background.
// Example syntax
chart.background.addEventListener('click', (event) => {
console.log(event)
})
For syntax examples, refer to EventInterface. Available event keys are listed under LCJSInteractionEventMap
Please note that many chart types have a separate "series background" (area enclosed by axes), which has its own separate events. This is accessed via seriesBackground property.
Readonly coordsSelector for "client" Coordinate System.
This references the coordinate system used in HTML.
It starts at top left of the web page and is measured in pixels.
For example, { x: 100, y: 20 } corresponds to 100 pixels from left and 20 pixels from top.
JavaScript events are tracked and HTML elements are positioned in the client coordinate system.
This selector can be used for translating client coordinates to other coordinate systems and vice versa. For example, in order to:
See translateCoordinate for more detailed use case information and example usage.
Readonly coordsSelector for "relative" Coordinate System.
This coordinate system is relative to the bottom left corner of the Control (chart/dashboard/etc.), and is measured as pixels.
For example, { x: 100, y: 20 } corresponds to 100 pixels from left and 20 pixels from bottom.
This selector can be used for two purposes:
Positioning LCJS UI elements in pixels:
// Position UI element in pixels by supplying `Control.coordsRelative` as its positioning system.
const textBox = Control.addUIElement(UIElementBuilders.TextBox, Control.coordsRelative)
.setOrigin(UIOrigins.LeftBottom)
.setPosition({ x: 100, y: 20 })
Translations between coordinate systems:
Use with translateCoordinate method to translate coordinates from "relative" to another coordinate system.
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).
Readonly titleInterface for attaching listeners to user interaction events (click, pointerenter, etc.) on chart title.
// Example syntax
chart.title.addEventListener('click', (event) => {
console.log(event)
})
For syntax examples, refer to EventInterface. Available event keys are listed under LCJSInteractionEventMap
Scale for panel area in percentages (0-100).
While it is not functionally equal to this, using coordsRelative coordinate system is preferred (more confidence for long term support).
Add callback function to be triggered when specified event is fired.
// Example syntax
object.addEventListener('click', (event) => {
console.log(event)
})
Some classes also report extra information about the interacted object with the second parameter:
// Most series share information about interacted data point
series.addEventListener('click', (event, info) => {
console.log(info)
})
Optional third parameter allows registering event handlers that will automatically remove themselves after first trigger:
// Example this listener will only fire once
object.addEventListener('click', (event) => {})
Each class has its own list of supported events.
Some events are from HTML standard (click, pointerdown, etc.),
while others are own events from LightningChart JS (dispose, resize, etc.)
To find what events are available, you can try following:
TypeScript enabled, just write addEventListener and see what possible event types the IDE suggests. These APIs are strongly typed, and even the callback event will be correctly typed.K type parameter extends.Callback function that is triggered when event is fired.
Optional options: LCJSAddEventListenerOptionsOptional extra configuration options.
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.coordsRelative )
// 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 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.coordsRelative )
// 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].
Attach object to an legendBox entry
Series itself for fluent interface
Object which has to be attached
Flag that indicates whether the Attachable should be hidden or not, when its respective Entry is clicked.
By default, entries are assigned a smooth looking gradient based on the component color. If this flag is true, then this is skipped, and exact component solid fill is used instead.
Permanently dispose 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
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 Array of all legend boxes created using addLegendBox method.
This will not include any legend boxes that were destroyed with dispose method.
Array of legend boxes.
Get size of control as pixels.
For stand-alone component, the size will be equal to the size of its containing HTML <div> (Control.engine.container)
For component inside Dashboard, the size will only include the component itself, so size can be less than the size of containing HTML <div>.
Object with x and y properties { x: number, y: number }, where both are pixel values.
Get the font of gauge ticks.
FontSettings object
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
Beta
Not to be confused with GlowEffect
Introduced in v7.0. API may be changed according to user feedback and reports.
Get the font of unit label.
FontSettings object
Get the font of value label.
FontSettings object
Remove event listener added using addEventListener.
The expected argument should be the exact same callback function that was supplied using addEventListener:
// Basic example syntax
const listener = () => {}
obj.addEventListener('click', listener)
obj.removeEventListener('click', listener)
// Basic boilerplate of custom interaction when user drags on an object
obj.addEventListener('pointerdown', (eventDown) => {
let prevCoord = eventDown
const handlePointerMove: LCJSInteractionEventListener<'pointermove'> = (eventMove) => {
const delta = { x: eventMove.clientX - prevCoord.clientX, y: eventMove.clientY - prevCoord.clientY }
prevCoord = eventMove
console.log(delta, eventMove.clientX, eventMove.clientY)
}
const handlePointerUp: LCJSInteractionEventListener<'pointerup'> = (eventUp) => {
window.removeEventListener('pointermove', handlePointerMove)
window.removeEventListener('pointerup', handlePointerUp)
}
window.addEventListener('pointermove', handlePointerMove)
window.addEventListener('pointerup', handlePointerUp)
})
Listener that was added using addEventListener.
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.
Set the angle interval of the gauge.
chart.setAngleInterval(180, 0)
Object itself
Start angle
End angle
Disable/Enable all animations of the Chart.
chart.setAnimationsEnabled(true)
Chart itself for fluent interface.
Boolean value to enable or disable animations.
Enable or disable dynamic gauge bar coloring based on value indicators.
If true, gauge bar is colored with the current indicator color.
If false, gauge bar is always colored according to its "normal" color, setBarColor
chart.setAutomaticBarColoring(true)
Object itself
Boolean flag
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 the normal bar color, when not affected by value coloring.`
chart.setBarColor(ColorRGBA(255, 0, 0))
Object itself
Color object
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
Enable or disable gradient coloring for the gauge bar. If true, the active color of the Gauge Bar is mapped to a RadialGradientFill. If false, bar is always solid color.
chart.setBarGradient(true)
Object itself
Boolean flag
Set the StrokeStyle of the gauge bar, i.e., the gauge bar border.
chart.setBarStrokeStyle(
new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }),
}),
)
Object itself
LineStyle or mutator to modify existing one
Set the thickness of the gauge bar.
chart.setBarThickness(20)
Object itself
Thickness in pixels
Enable or disable color animations.
// Slow down animation
chart.setColorAnimation(true, 0.75)
// Speed up animation
chart.setColorAnimation(true, 1.25)
// Disable animation
chart.setColorAnimation(false)
Object itself
Boolean flag
Optional value for adjusting the speed of the animation
Set the distance between gauge bar and value indicators.
chart.setGapBetweenBarAndValueIndicators(4)
Object itself
Distance in pixels
Set the background glow color. arg: undefined = No background glow color. arg: Color = Use explicit glow color always. arg: { auto: true } = Automatically color with same color as gauge bar.
// Disable background glow
chart.setGlowColor(undefined)
// Use explicit glow color
chart.setGlowColor(ColorRGBA(255, 0, 0, 64))
// Use dynamic coloring, set alpha value
chart.setGlowColor({auto: true, alpha: 32})
Object itself
undefined | Color | { auto: boolean }
Sets the gauge value interval.
chart.setInterval(-100, 100)
Object itself
start value
end value
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
Align the gauge needle from the gauge bar center.
chart.setNeedleAlignment(-1)
Object itself
Numerical offset value between -1 and 1
Set the FillStyle of the gauge needle.
chart.setNeedleFillStyle(
new SolidFill({
color: ColorRGBA(255, 0, 0),
}),
)
Object itself
FillStyle or mutator to modify existing one
Set the length of the gauge needle.
chart.setNeedleLength(20)
Object itself
Length in pixels
Set the LineStyle of the needle stroke.
chart.setNeedleStrokeStyle(
new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }),
}),
)
Object itself
LineStyle or mutator to modify existing one
Set the thickness of the needle.
chart.setNeedleThickness(10)
Object itself
Thickness in pixels
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.
Enable or disable rounded edges for the gauge nad value indicators.
chart.setRoundedEdges(false)
Object itself
Boolean flag
Set the FillStyle of gauge ticks.
chart.setTickFillStyle(
new SolidFill({
color: ColorRGBA(255, 0, 0),
}),
)
Object itself
FillStyle or mutator to modify existing one
Set the FontSettings of gauge ticks.
// Example, set font size
chart.setTickFont((font) => font.setSize(16))
Object itself
FontSettings or mutator to modify existing one
Set the formatter function of gauge ticks.
chart.setTickFormatter((value) => value.toFixed(1))
Object itself
Callback function to format tick values
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 1, specify vertical margins
ChartXY.setTitleMargin({ top: 0, bottom: 10 })
// 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
Beta
Not to be confused with GlowEffect
Introduced in v7.0. API may be changed according to user feedback and reports.
Set the text of the unit label.
chart.setUnitLabel("°C")
Object itself
Unit label text
Set the FillStyle of the unit label.
chart.setUnitLabelFillStyle(
new SolidFill({
color: ColorRGBA(255, 0, 0),
}),
)
Object itself
FillStyle or mutator to modify existing one
Set the FontSetting of the unit label.
// Example, set font size
chart.setUnitLabelFont((font) => font.setSize(16))
Object itself
FontSettings or mutator to modify existing one
Set the value of the gauge.
chart.setValue(100)
Object itself
Gauge value
Enable or disable value animations.
// Slow down animation
chart.setValueAnimation(true, 0.75)
// Speed up animation
chart.setValueAnimation(true, 1.25)
// Disable animation
chart.setValueAnimation(false)
Object itself
Boolean flag
Optional value for adjusting the speed of the animation
Set the text or formatting of the value label.
chart.setValueFormatter((value) => value.toFixed(1))
Object itself
String value or callback function to format the value label
Set the thickness of the value indicators.
chart.setValueIndicatorThickness(10)
Object itself
Thickness in pixels
Set the value indicators of the gauge.
chart.setValueIndicators([
{ start: 0, end: 25, color: ColorCSS('red') },
{ start: 25, end: 50, color: ColorCSS('orange') },
{ start: 50, end: 75, color: ColorCSS('yellow') },
{ start: 75, end: 100, color: ColorCSS('green') },
])
Object itself
Array of value indicators
Set the FillStyle of the value label.
chart.setValueLabelFillStyle(
new SolidFill({
color: ColorRGBA(255, 0, 0),
}),
)
Object itself
FillStyle or mutator to modify existing one
Set the FontSettings of the value label.
// Example, set font size
chart.setValueLabelFont((font) => font.setSize(16))
Object itself
FontSettings or mutator to modify existing one
Translate a coordinate in HTML client coordinate system to relative coordinates within the component.
const locationClient = { clientX: document.body.clientWidth * 0.2, clientY: document.body.clientHeight * 0.5 }
const locationRelative = chart.translateCoordinate(locationClient, chart.coordsRelative)
// locationRelative is in pixels relative to bottom left corner of the chart
Relative coordinates can be used for positioning LightningChart JS UI components:
const textBox = chart.addUIElement(UIElementBuilders.TextBox, chart.coordsRelative)
// Left bottom of TextBox is positioned 20 pixels right and 20 pixels up from charts bottom left corner
.setOrigin(UIOrigins.LeftBottom)
.setPosition({ x: 20, y: 20 })
NOTE: Currently coordinate translations can't be guaranteed to be in sync with latest updates to charts.
For example, if you change axis interval, or add data to a series, you need to wait for 1 frame to be displayed before translateCoordinate will behave as expected.
LineSeries.add(myData)
requestAnimationFrame(() => {
// translateCoordinate should now consider data added just now.
})
Translate a coordinate from relative control coordinates to HTML client coordinate system.
// 10 pixels left and 20 pixels up from controls bottom left corner
const locationRelative = { x: 10, y: 20 }
const locationClient = chart.translateCoordinate(locationRelative, chart.coordsRelative, chart.coordsClient)
Client coordinates can be used to absolute position HTML elements using CSS, for example.
myHTMLElement.style.position = 'absolute'
myHTMLElement.style.left = locationClient.clientX
myHTMLElement.style.top = locationClient.clientY
NOTE: Currently coordinate translations can't be guaranteed to be in sync with latest updates to charts.
For example, if you change axis interval, or add data to a series, you need to wait for 1 frame to be displayed before translateCoordinate will behave as expected.
LineSeries.add(myData)
requestAnimationFrame(() => {
// translateCoordinate should now consider data added just now.
})
Chart for visualizing a single value within a interval.
** Creating Gauge Chart **
The gauge interval can be adjusted to suit the granularity of the data being visualized.
The gauge bar can be configured to display data over a specific range of angles. This allows for customization of the visual appearance of the gauge, such as whether it covers a full circle or just a segment of it.
Gauge chart can display value indicators on top of the main bar, which are additional intervals superimposed on the main gauge bar. These value indicators can be used to delineate certain thresholds or value ranges of interest in the data.