Readonly scaleAdd 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.
Adds an arbitrary amount of SpiderPoints to the Series.
Animates transition if its enabled on owning chart.
Object itself
Rest ...points: SpiderPoint[]List of SpiderPoints as {'axis': string, 'value': number}
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 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
Get whether series is taken into account with automatic scrolling and fitting of attached axes.
By default, this is true for all series.
true default, axes will take series into account in scrolling and fitting operations.
false, axes will ignore series boundaries.
Beta
Get override behavior for when this series is formatted to be displayed by a cursor.
Override callback or undefined
Introduced in v6.0.0, the state and definition of this API is not finalized. It may change in future versions without regard to backwards compatibility if there is significant cause from user feedback.
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 shape of points.
This is defined upon creation of series, and cannot be changed afterwards.
PointShape
Get boolean flag that is true when a Pointer device is over the chart component.
In order for this method to work, the components pointer event tracking must be enabled (getPointerEvents)
Boolean
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.
Set animation for adding points.
Object itself
Optional easing: AnimationEasingType of easing for animation or undefined to disable animations
Optional duration: numberCustom duration for animation in milliseconds.
Set component highlight animations enabled or not. For most components this is enabled by default.
// Example usage, disable highlight animations.
component.setAnimationHighlight(false)
Object itself
Animation enabled?
Set whether series is taken into account with automatic scrolling and fitting of attached axes.
By default, this is true for all series.
By setting this to false, any series can be removed from axis scrolling/fitting.
// Example syntax, remove series from automatic scrolling / fitting.
LineSeries.setAutoScrollingEnabled(false)
Object itself for fluent interface.
true default, axes will take series into account in scrolling and fitting operations.
false, axes will ignore series boundaries.
Configure whether cursors should pick on this particular series or not.
// Example, prevent chart auto cursor from snapping to a series.
LineSeries.setCursorEnabled(false)
Related API:
Beta
Set override behavior for when this series is formatted to be displayed by a cursor. This can be used to alter and expand on cursor formatting done for a specific series, either by the library's default cursor formatters or even the users own cursor formatters defined on chart level.
// Example syntax, add extra row to display a custom data property
series.setCursorFormattingOverride((hit, before) => {
if (!isHitSampleXY(hit)) return before
const customPropertyValue = data[hit.iSample].customProperty
return [...before, ['ASD', '', customPropertyValue.toFixed(3)]]
})
To use this with users own cursor formatters, you can use useCursorFormatterSeriesOverride:
// Example syntax, define custom cursor formatting with support for series overrides
chart.setCursorFormatting((_, __, hits) => {
return [
[hits[0].axisX.formatValue(hits[0].x)],
...hits.map((hit) => useCursorFormatterSeriesOverride(hit, [['Y:', '', hit.axisY.formatValue(hit.y)]])).flat(),
]
})
Object itself.
Introduced in v6.0.0, the state and definition of this API is not finalized. It may change in future versions without regard to backwards compatibility if there is significant cause from user feedback.
Override callback or undefined
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 the Polygon that represents the shape of the Series.
Example use:
// Create a new style
SpiderSeries.setFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
SpiderSeries.setFillStyle((solidFill) => solidFill.setA(80))
// Set hidden
SpiderSeries.setFillStyle(emptyFill)
Series itself for fluent interface.
FillStyle which has to be used for recoloring or mutator to modify existing one.
Set state of component highlighting.
// Example usage
component.setHighlight(true)
component.setHighlight(0.5)
If highlight animations are enabled (which is true by default), the transition will be animated. As long as the component is highlighted, the active highlight intensity will be animated continuously between 0 and the configured value. Highlight animations can be disabled with setAnimationHighlight
Object itself
Boolean or number between 0 and 1, where 1 is fully highlighted.
Set highlight on mouse hover enabled or disabled.
Mouse interactions have to be enabled on the component for this to function as expected. See setPointerEvents for more information.
Object itself for fluent interface.
True if highlighting on mouse hover, false if no highlight on mouse hover
Beta
Set icon of the chart component. This is displayed in legends and by default cursor formatters.
const image = new Image()
image.src = 'image.png'
const icon = chart.engine.addCustomIcon(image)
ChartComponent.setIcon(icon)
Object itself.
Released as beta feature in v5.2.0 feature may still change according to user feedback and experiences.
Icon
Sets the name of the Component updating attached LegendBox entries
Object itself
Name of the Component
Set point fill style of Series. Use IndividualPointFill object to enable individual coloring of points.
Example usage:
// Create a new style
SpiderSeries.setPointFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
SpiderSeries.setPointFillStyle((solidFill) => solidFill.setA(80))
// Set hidden
SpiderSeries.setPointFillStyle(emptyFill)
Series itself for fluent interface.
Set the rotation of points in degrees.
Rotation angle in degrees
Set size of point in pixels
Object itself for fluent interface
Size of point in pixels
Set whether element can be target of pointer events or not.
Disabling pointer events means that the objects below this component can be interacted through it.
Object itself for fluent interface
Specifies state of mouse interactions
Set stroke style of the Polygon that represents the shape of the Series.
Supported line styles:
Example usage:
// Specified LineStyle
SpiderSeries.setStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
// Changed thickness
SpiderSeries.setStrokeStyle((solidLine) => solidLine.setThickness(5))
// Hidden
SpiderSeries.setStrokeStyle(emptyLine)
Chart itself
Either a SolidLine object or a function, which will be used to create a new SolidLine based on current value.
Set element visibility.
Object itself.
true when element should be visible and false when element should be hidden.
Set animation for when series visibility changes.
This refers to default interaction when attached LegendBoxEntry is toggled, or alternatively when setVisible() method is used.
// Example, disable animation when visibility changes
SpiderSeries.setVisibleStateChangedAnimation(undefined)
// Example, specify animation easing and duration
SpiderSeries.setVisibleStateChangedAnimation(AnimationEasings.linear, 2000)
Object itself
Optional easing: AnimationEasingType of easing for animation or undefined to disable animations
Optional duration: numberCustom duration for animation in milliseconds.
Match legend entry style to reflect components own style.
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.
Class that represents a collection of linked data-points inside a SpiderChart.
Given data is visualized in the form of a polygon, where each SpiderPoint is an edge along an Axis. This polygon can be styled with 3 independent areas:
Data is pushed with addPoints in form: { axis: string, value: number }