Protected _isActive state of Cursor
Readonly axisXReadonly axisYReadonly chartReadonly scaleScale of the series
Append a single XY coordinate or list of coordinates into the series.
// Example syntax
PointSeries.add({ x: 0, y: 100 })
PointSeries.add([
{ x: 0, y: 100 },
{ x: 10, y: 50 },
{ x: 20, y: 75 },
])
Additional extra data point properties
There is also a set of extra properties that can be supplied for each data point:
color | Associate data point with a color. Can be used for individual point coloring, when point fill style is IndividualPointFill.size | Associate data point with a size. Can be used for individual point size. Must be enabled with setIndividualPointSizeEnabled.rotation | Associate data point with a rotation. Can be used for individual point rotation. Must be enabled with setIndividualPointRotationEnabled.value | Associate data point with a value. Can be used for paletted point coloring. Must be enabled with setIndividualPointValueEnabled. PointSeries
.setIndividualPointSizeEnabled(true)
.setIndividualPointRotationEnabled(true)
.setIndividualPointValueEnabled(true)
.add({
x: 0,
y: 0,
color: ColorRGBA(255, 0, 0),
size: 10,
rotation: 45,
value: 62.5
})
Object itself for fluent interface.
Single XY coordinate or list of coordinates.
Append new data points into the series by only supplying X coordinates.
// Example syntax, number array
LineSeries.addArrayX([ 5, 1, 2, 0 ])
This method supports binary data input by using Typed arrays. If your data comes in any binary format, then using the typed array syntax is recommended for best performance.
// Example syntax, typed array (Float32)
const float32Array = new Float32Array(4)
float32Array[0] = 5
float32Array[1] = 1
float32Array[2] = 2
float32Array[3] = 0
LineSeries.addArrayX(float32Array)
Each X coordinate will be paired with an automatically generated Y coordinate.
By default, this continues from the last data point in the series.
However, the behavior of assigning Y coordinates can be controlled with the optional step and start parameters.
For more methods of appending data into series, see:
Data gaps
When using LineSeries, AreaSeries or other series types which connect data points together, the connections between specific data points can be removed by adding gap data points.
A gap data point is specified by using Number.NaN.
// Example, data gap syntax.
LineSeries.addArrayX([ 10, 12, Number.NaN, 15, 20 ])
Object itself for fluent interface.
Array of X-values.
Optional step between each Y coordinate. Defaults to 1.
Optional start: numberOptional value for first generated Y-value. If undefined, will continue after last point's Y value in series, or 0 if there are no points in series.
Append new data points into the series by only supplying Y coordinates.
// Example syntax, number array
LineSeries.addArrayY([ 5, 1, 2, 0 ])
This method supports binary data input by using Typed arrays. If your data comes in any binary format, then using the typed array syntax is recommended for best performance.
// Example syntax, typed array (Float32)
const float32Array = new Float32Array(4)
float32Array[0] = 5
float32Array[1] = 1
float32Array[2] = 2
float32Array[3] = 0
LineSeries.addArrayY(float32Array)
Each Y coordinate will be paired with an automatically generated X coordinate.
By default, this continues from the last data point in the series.
However, the behavior of assigning X coordinates can be controlled with the optional step and start parameters.
For more methods of appending data into series, see:
Data gaps
When using LineSeries, AreaSeries or other series types which connect data points together, the connections between specific data points can be removed by adding gap data points.
A gap data point is specified by using Number.NaN.
// Example, data gap syntax.
LineSeries.addArrayY([ 10, 12, Number.NaN, 15, 20 ])
Object itself for fluent interface.
Array of Y-values.
Optional step between each X coordinate. Defaults to 1.
Optional value for first generated X-value. If undefined, will continue after last point's X value in series, or 0 if there are no points in series.
Append new data points into the series by supplying X and Y coordinates in two separated arrays.
// Example syntax, number array
LineSeries.addArraysXY([0, 1, 2, 3], [ 5, 1, 2, 0 ])
This method supports binary data input by using Typed arrays. If your data comes in any binary format, then using the typed array syntax is recommended for best performance.
// Example syntax, typed array (Float32)
const float32Array = new Float32Array(4)
float32Array[0] = 5
float32Array[1] = 1
float32Array[2] = 2
float32Array[3] = 0
LineSeries.addArraysXY([0, 1, 2, 3], float32Array)
For more methods of appending data into series, see:
Data gaps
When using LineSeries, AreaSeries or other series types which connect data points together, the connections between specific data points can be removed by adding gap data points.
A gap data point is specified by using Number.NaN.
// Example, data gap syntax.
LineSeries.addArraysXY(
[ 0, 1, 2, 3, 4 ],
[ 10, 12, Number.NaN, 15, 20 ]
)
Object itself for fluent interface.
Array of X-values.
Array of Y-values. Length should be equal to length of arrayX.
Add Marker to the Series.
SeriesMarkerXY
StaticCursorBuilderXY object for customized look of marker. MarkerBuilders.XY can be used to build a custom one from scratch.
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.
Clear all previously pushed data points from the series.
// Example usage
LineSeries.clear()
Object itself for fluent interface.
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.
Get ResultTable Formatter.
Function which builds ResultTable content for SeriesXY.
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
Subscribe onDispose event.
This event is triggered whenever the ChartComponent is disposed.
// Example usage
lineSeries.onDispose(() => {
console.log('lineSeries was disposed')
})
lineSeries.dispose()
Token of subscription
Event handler function
Subscribe to highlight object event. This is called whenever an object is highlighted.
Token that can be used to unsubscribe from the event.
Function that is called when event is triggered.
Add event listener to Mouse Click Event
Token of the event listener
Event listener for Mouse Click Event
Add event listener to Mouse Double Click Event
Token of the event listener
Event listener for Mouse Double Click Event
Add event listener to Mouse Down Event
Token of the event listener
Event listener for Mouse Down Event
Subscribe to Mouse Drag event
Subscribe to Mouse Drag Start event
Subscribe to Mouse Drag Stop event
Add event listener to Enter Event
Token of the event listener
Event listener for Mouse Enter Event
Add event listener to Mouse Leave Event
Token of the event listener
Event listener for Mouse Leave Event
Add event listener to Mouse Move Event
Token of the event listener
Event listener for Mouse Move Event
Add event listener to Mouse Up Event
Token of the event listener
Event listener for Mouse Up Event
Subscribe to Mouse Wheel event
Token of subscription
Event handler function
Subscribe to Touch End event
Token of subscription
Event handler function
Subscribe to Touch Move event
Token of subscription
Event handler function
Subscribe to Touch Start event
Token of subscription
Event handler function
Register new event listener to visibleStateChanged event.
Event listener for visibleStateChanged
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:
Configure formatting of Cursor ResultTable when pointing at this series.
// Example usage
LineSeries.setCursorResultTableFormatter((tableBuilder, series, x, y, dataPoint) => {
return tableBuilder
.addRow(`Pointing at`, '', series.getName())
.addRow(`X:`, '', dataPoint.x.toFixed(1))
.addRow(`Y:`, '', dataPoint.y.toFixed(1))
})
The general syntax of configuring ResultTable formatting is shared between all series types; You specify a callback function, which receives a TableContentBuilder. The contents of the table are then set using methods of the table builder:
// Using TableContentBuilder.
LineSeries.setCursorResultTableFormatter((tableBuilder, series, x, y) => {
// addRow adds a list of strings to a new row in the table. Empty strings ('') will allocate any extra horizontal space within the row.
tableBuilder
.addRow('Item 0:', '', 'Value 0')
.addRow('Item 1:', '', 'Value 1')
.addRow('Long row that highlights the idea of empty strings')
// After configuration, the table builder must be returned!
return tableBuilder
})
Default Axis formatting can be referenced by using formatValue method.
The additional values that are supplied to the callback function, vary per series,
refer to the series documentation of setCursorResultTableFormatter to learn the exact available information.
For example, LineSeries receives three extra parameters:
series | reference to the series itself.x | pointed data point X coordinate.y | pointed data point Y coordinate.dataPoint | reference to the pointed data point as supplied by user.Related API:
Object itself
Function which builds ResultTable content.
Disable automatic data cleaning.
// Example syntax, disable data cleaning.
series.setDataCleaning(undefined)
Object itself for fluent interface.
Data cleaning configuration.
Enable automatic data cleaning by minDataPointCount configuration.
Specifying minDataPointCount enables lazy cleaning of data that is outside view as long as the remaining data amount doesn't go below the configured threshold.
// Example syntax for specifying minDataPointCount
series.setDataCleaning({ minDataPointCount: 10000 })
Usage of minDataPointCount is recommended in most common applications that require automatic data cleaning.
The actual value is often not very particular, just setting it above 0 to enable it is usually enough (lazy data cleaning of out of view data).
// Example, enable lazy data cleaning of out of view data.
series.setDataCleaning({ minDataPointCount: 1 })
Object itself for fluent interface.
Data cleaning configuration.
Configure draw order of the series.
The drawing order of series inside same chart can be configured by configuring their seriesDrawOrderIndex.
This is a simple number that indicates which series is drawn first, and which last.
The values can be any JS number, even a decimal. Higher number results in series being drawn closer to the top.
By default, each series is assigned a running counter starting from 0 and increasing by 1 for each series.
// Example, create 2 series and configure them to be drawn in reverse order.
const series1 = ChartXY.addLineSeries()
.setDrawOrder({ seriesDrawOrderIndex: 1 })
const series2 = ChartXY.addLineSeries()
.setDrawOrder({ seriesDrawOrderIndex: 0 })
// Example, ensure a series is drawn above other series.
SeriesXY.setDrawOrder({ seriesDrawOrderIndex: 1000 })
Object itself.
Object with seriesDrawOrderIndex property.
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 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 setMouseInteractions for more information.
Object itself for fluent interface.
True if highlighting on mouse hover, false if no highlight on mouse hover
Enable or disable individual point rotation.
When enabled, rotation for each point can be provided with the location of the point.
pointSeries.add({x: 1, y: 2, rotation: 45 })
Boolean state for individual point size enabled
Enable or disable individual point sizing.
When enabled, size for each point can be provided with the location of the point.
pointSeries.add({x: 1, y: 2, size: 10 })
Boolean state for individual point size enabled
Enable or disable individual point value attributes.
When enabled, each added data point can be associated with a numeric value attribute.
PointSeries.add({ x: 1, y: 2, value: 10 })
Can be used for dynamic per data point coloring when points are styled with PalettedFill. See setPointFillStyle.
Individual point values enabled or disabled.
Set component mouse interactions enabled or disabled.
Disabling mouse interactions means that the objects below this component can be interacted through it.
Possible side-effects from disabling mouse interactions:
Object itself for fluent interface
Specifies state of mouse interactions
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
PointSeries.setPointFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
PointSeries.setPointFillStyle((solidFill) => solidFill.setA(80))
// Set hidden
PointSeries.setPointFillStyle(emptyFill)
Series itself for fluent interface.
Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
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 element visibility.
Object itself.
true when element should be visible and false when element should be hidden.
Solves the nearest data point to a given coordinate on screen.
Undefined or data-structure for positioning of cursors
Location on screen
Implementation of SeriesXY for visualizing a collection of Points by filling them with a specifiable PointShape.
PointSeries are created with addPointSeries.
NOTE: Points shape must be specified when series is created.
Frequently used API: