Axis X
Axis Y
Scale of the series
Append a single XY
coordinate or list of XY
coordinates into the series.
// Example syntax
LineSeries.add({ x: 0, y: 100 })
LineSeries.add([
{ x: 0, y: 100 },
{ x: 10, y: 50 },
{ x: 20, y: 75 },
])
Point series also allow 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. PointLineSeries
.setIndividualPointSizeEnabled(true)
.setIndividualPointRotationEnabled(true)
.setIndividualPointValueEnabled(true)
.add({
x: 0,
y: 0,
color: ColorRGBA(255, 0, 0),
size: 10,
rotation: 45,
value: 62.5
})
For more methods of appending data into series, see:
Single XY coordinate or list of coordinates.
Object itself for fluent interface.
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 ])
Array of X-values.
Optional step between each Y coordinate. Defaults to 1.
Optional 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.
Object itself for fluent interface.
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 ])
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.
Object itself for fluent interface.
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 ]
)
Array of X-values.
Array of Y-values. Length should be equal to length of arrayX.
Object itself for fluent interface.
Add Marker to the Series.
StaticCursorBuilderXY object for customized look of marker. MarkerBuilders.XY can be used to build a custom one from scratch.
SeriesMarkerXY
Attach object to an legendBox entry
Object which has to be attached
Flag that indicates whether the Attachable should be disposed/restored, when its respective Entry is clicked.
Series itself for fluent interface
Clear all previously pushed data points from the series.
// Example usage
LineSeries.clear()
Object itself for fluent interface.
Remove everything related to the object from all collections associated with rendering cycle and allows the object to be collected by GC
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.
Whether Cursor is enabled or not
Get if cursor interpolates solved data-points along series by default.
Boolean flag
Get ResultTable Formatter.
Function which builds ResultTable content for SeriesXY.
Get basis of solving data point nearest to a given location from this series.
Default configuration is 'nearest'
.
String describing the desired solve behavior.
Get boolean flag for whether object should highlight on mouse hover
Boolean for if object should highlight on mouse hover or not.
the state of highlighted flag
Gets if individual point rotation is enabled or not.
Gets if individual point sizing is enabled or not.
Gets if individual point values are enabled or disabled.
Get boolean flag for whether object is currently under mouse or not
Boolean for is object under mouse currently
Copy of last point added to the Series or undefined if it doesn't exist.
Get amount of points that series should keep around at all times (data-cleaning won't touch them).
Number of points, or undefined if data-cleaning is disabled
Get mouse interactions enabled or disabled. Disabled mouse-interactions will naturally prevent mouse-driven highlighting from ever happening.
Mouse interactions state
Get the name of the Component.
The name of the Component.
Get normal points fill style.
Normal point fill style.
Current highlight point fill style
Get the current rotation of points.
Get shape of points.
This is defined upon creation of series, and cannot be changed afterwards.
PointShape
Size of point in pixels
Get stroke style of Series.
SolidLine object
Get stroke style of Series when it is highlighted. Highlighting is activated by placing mouse on top / touching Series (if mouse-interactions are not disabled), or by using setHighlighted() method.
SolidLine object
Max X value of the series or 0
if series has no data.
Min X value of the series or 0
if series has no data.
Max Y value of the series or 0
if series has no data.
Min Y value of the series or 0
if series has no data.
TODO: True for enabled and false for disabled
Unsubscribe from Highlight object event. This is called whenever an object is highlighted
Token that was received when subscribing to the event.
True if the unsubscription was successful.
Remove event listener from Series Hover Event.
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Click Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Double Click Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Down Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Drag Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Drag Start Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Drag Stop Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Enter Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Leave Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Move Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Up Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Wheel Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Touch End Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Touch Move Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Touch Start Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Subscribe to highlight object event. This is called whenever an object is highlighted.
Function that is called when event is triggered.
Token that can be used to unsubscribe from the event.
Add event listener to Series Hover Event. Hover event is a custom mouse-event designed for Series that is the main link between Cursors and Series.
Callback function that is called whenever mouse enters / moves or leaves the Series
Token of the event listener
Add event listener to Mouse Click Event
Event listener for Mouse Click Event
Token of the event listener
Add event listener to Mouse Double Click Event
Event listener for Mouse Double Click Event
Token of the event listener
Add event listener to Mouse Down Event
Event listener for Mouse Down Event
Token of the event listener
Subscribe to Mouse Drag event
Subscribe to Mouse Drag Start event
Subscribe to Mouse Drag Stop event
Add event listener to Enter Event
Event listener for Mouse Enter Event
Token of the event listener
Add event listener to Mouse Leave Event
Event listener for Mouse Leave Event
Token of the event listener
Add event listener to Mouse Move Event
Event listener for Mouse Move Event
Token of the event listener
Add event listener to Mouse Up Event
Event listener for Mouse Up Event
Token of the event listener
Subscribe to Mouse Wheel event
Event handler function
Token of subscription
Subscribe to Touch End event
Event handler function
Token of subscription
Subscribe to Touch Move event
Event handler function
Token of subscription
Subscribe to Touch Start event
Event handler function
Token of subscription
Tell the owning chart to restore this series.
Object itself.
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)
true
default, axes will take series into account in scrolling and fitting operations.
false
, axes will ignore series boundaries.
Object itself for fluent interface.
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:
'nearest-x'
, 'nearest'
, etc.).
This method is not available for all series types (more support will be added in near future).Set if cursor interpolates solved data-points along series by default.
// Example, disable default interpolation of progressiveX point line series.
const series = ChartXY.addPointLineSeries({
dataPattern: {
pattern: 'ProgressiveX'
}
})
.setCursorInterpolationEnabled(false)
Cursor interpolation is only supported with a collection of configuration combinations:
'nearest'
'nearestX'
'nearestY'
With any other combination, or if cursor intepolation is disabled, the closest actual data point will be selected.
Related API:
Related API:
'nearest-x'
, 'nearest'
, etc.).Boolean flag
Object itself for fluent interface
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 Axis.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:
'nearest-x'
, 'nearest'
, etc.).Function which builds ResultTable content.
Object itself
Set basis of solving data point nearest to a given location from this series.
Default configuration is 'nearest-x'
.
// Example, configure series cursor to snap to closest data point along both X and Y dimensions.
PointLineSeries.setCursorSolveBasis('nearest')
Related API:
String describing the desired solve behavior.
Disable automatic data cleaning.
// Example syntax, disable data cleaning.
series.setDataCleaning(undefined)
Data cleaning configuration.
Object itself for fluent interface.
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 })
Data cleaning configuration.
Object itself for fluent interface.
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.
True if highlighting on mouse hover, false if no highlight on mouse hover
Object itself for fluent interface.
Enable or disable forced highlighting of series
True for enabled and false for disabled
Series itself for fluent interface
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.
PointLineSeries.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.
Configure automatic data cleaning by maxPointCount
.
This allows the cleaning of all excess data points that are outside view, so that after cleaning at least maxPointCount
data points are retained.
Essentially it configures the head length of a series.
// Example, progressive X line series with automatic data cleaning.
const series = ChartXY.addLineSeries({
dataPattern: {
pattern: 'ProgressiveX'
}
})
// Keep at least 1000 data points in series, otherwise excess out of view data can be cleaned for more memory.
.setMaxPointCount(1000)
// Setup automatically scrolling X Axis.
chart.getDefaultAxisX().setScrollStrategy(AxisScrollStrategies.progressive).setInterval(0, 1000)
// Continously stream data into series.
let x = 0
setInterval(() => {
const newDataPoints = []
for (let i = 0; i <= 10; i += 1) {
newDataPoints.push({ x: x + i, y: Math.random() * 100 })
}
x += newDataPoints.length
series.add(newDataPoints)
}, 1000 / 60)
For progressive Series
, there is another way to enable automatic data cleaning: setDataCleaningThreshold.
Enabling automatic data cleaning is crucial in applications that run for a long time, or even forever, because it allows clearing memory for allocating new data points.
Configuration for automatic data cleaning by maxPointCount
.
If undefined or 0 is passed, automatic data cleaning by maxPointCount
will be disabled.
Object itself for fluent interface.
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:
Specifies state of mouse interactions
Object itself for fluent interface
Sets the name of the Component updating attached LegendBox entries
Name of the Component
Object itself
Set point fill style of Series. Use IndividualPointFill to enable individual coloring of points.
Example usage:
// Create a new style
PointLineSeries.setPointFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
PointLineSeries.setPointFillStyle((solidFill) => solidFill.setA(80))
// Set hidden
PointLineSeries.setPointFillStyle(emptyFill)
Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
Series itself for fluent interface.
Set point fill style of Series when it is highlighted. Use IndividualPointFill to enable individual coloring of points.
Example usage:
// Create a new style
PointLineSeries.setPointFillStyleHighlight(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
PointLineSeries.setPointFillStyleHighlight((solidFill) => solidFill.setA(80))
// Set hidden
PointLineSeries.setPointFillStyleHighlight(emptyFill)
// Automatic
PointLineSeries.setPointFillStyleHighlight(undefined)
Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value or undefined for automatic value based on normal style.
Series itself for fluent interface.
Set the rotation of points.
Rotation angle in degrees
Set size of point in pixels
Size of point in pixels
Object itself for fluent interface
Set stroke style of Series.
// Example syntax, specify LineStyle
LineSeries.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorHEX('#F00') })
}))
// Example syntax, change active LineStyle
LineSeries.setStrokeStyle((stroke) => stroke.setThickness(5))
Use -1
thickness to enable primitive line rendering.
Primitive line rendering can have slightly better rendering performance than line with 1
thickness but the quality of line is not as good.
LineSeries.setStrokeStyle((solidLine) => solidLine.setThickness(-1))
Supported fill styles:
Solid color for entire line series.
// Example, solid colored line.
LineSeries.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) })
}))
To learn more about available Color factories, see ColorRGBA
Color line stroke dynamically based on x
or y
coordinate.
// Example, dynamic color by Y coordinates
LineSeries.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new PalettedFill({
lookUpProperty: 'y',
lut: new LUT({
interpolate: true,
steps: [
{ value: 0, color: ColorRGBA(255, 0, 0) },
{ value: 100, color: ColorRGBA(0, 255, 0) },
]
})
})
}))
To learn more about Color lookup tables, see LUT.
Color line stroke with a linear configurable gradient palette.
// Example, linear gradient line color
LineSeries.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new LinearGradientFill()
}))
To learn more about linear gradient configurations, see LinearGradientFill.
Color line stroke with a radial configurable gradient palette.
// Example, radial gradient line color
LineSeries.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new RadialGradientFill()
}))
To learn more about radial gradient configurations, see RadialGradientFill.
Either a SolidLine object or a function, which will be used to create a new SolidLine based on current value.
Object itself for fluent interface.
Set stroke style of Series when it is highlighted. Highlighting is activated by placing mouse on top / touching Series (if mouse-interactions are not disabled), or by using setHighlighted() method.
Example usage:
// Specified LineStyle
LineSeries.setStrokeStyleHighlight(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
// Changed thickness
LineSeries.setStrokeStyleHighlight((solidLine) => solidLine.setThickness(5))
// Hidden must be done with transparentLine, emptyLine is not supported
LineSeries.setStrokeStyleHighlight(transparentLine)
// Automatic
LineSeries.setStrokeStyleHighlight(undefined)
Either a SolidLine object or a function, which will be used to modify current value or undefined for automatic value based on normal style.
Chart itself
Solves the nearest datapoint to a given coordinate on screen.
Location on screen
Undefined or data-structure for positioning of cursors
Solves the nearest datapoint to a given coordinate on a screen from a specific segment.
Location on screen
Segment to solve from
Undefined or data-structure for positioning of cursors
Step Series that plots incoming data-points using Step preprocessing function.