Beta Protected _isActive state of Cursor
Readonly axisXReadonly axisYReadonly chartReadonly scaleScale of the series
Add data as { x: number, y: number } objects.
This method exists only for backwards compatibility reasons. Using appendJSON is recommended instead.
Object itself.
Use appendJSON instead
Add data as number[] number[]
This method exists only for backwards compatibility reasons. Using appendSamplesXY is recommended instead.
Object itself.
Use appendSamplesXY instead
Alter existing samples in the data set. This method also supports automatically appending samples when attempting to alter samples that don't exist in data set.
This method alters existing samples by referencing sample indexes.
This simply refers to a incrementing counter of when each sample was first introduced.
For example, 0 refers to first sample that was added to data set.
When data cleaning is enabled, sample indexes do NOT shift. They always point to unique samples, even if old samples are removed.
// Example, basic usage - set first sample to { x: 0, y: 0 }
DataSetXY.alterSamples(0, {
xValues: [0],
yValues: [1]
})
// Example, alter several samples at once - set first sample to { x: 0, y: 10 }, second sample to { x: 1, y: 11 } and so on.
DataSetXY.alterSamples(0, {
xValues: [0, 1, 2],
yValues: [10, 11, 12]
})
// Example, alter last sample to have Y = 0.
DataSetXY.alterSamples(DataSetXY.getNextSampleIndex() - 1, {
yValues: [0]
})
See also alterSamplesByID.
Object itself.
First altered sample index.
Object with new sample values. Behaves same as appendSamples.
Optional colors?: number[] | Uint32Array | Color[]Optional count?: numberOptional ids?: number[] | Uint32ArrayOptional lookupOptional offset?: numberOptional offsetOptional offsetOptional offsetOptional offsetOptional offsetOptional rotations?: number[] | Float32ArrayOptional sizes?: number[] | Float32ArrayOptional x?: numberOptional xOptional y?: numberOptional yAlter existing samples in the data set.
This method alters existing samples by referencing their ID properties. The ID property is an optional sample number property, which CAN be specified by the user. They have to be enabled using ids and afterwards can be added alongside other data properties, like x, y, etc.
// Example, basic usage
const dataSet = new DataSetXY({ ids: true })
dataSet.appendSamples({
ids: [0, 1, 2],
yValues: [10, 12, 7],
})
dataSet.alterSamplesByID([1], {
yValues: [20]
})
// result yValues = [10, 20, 7]
// Example, apply same value to all altered samples
dataSet.alterSamplesByID([0, 1, 2], { size: 5 })
See also alterSamples.
Object itself.
List of sample IDs that are altered.
Object with new sample values. Behaves same as appendSamples.
Optional color?: number | ColorOptional colors?: number[] | Uint32Array | Color[]Optional lookupOptional lookupOptional rotation?: numberOptional rotations?: number[] | Float32ArrayOptional size?: numberOptional sizes?: number[] | Float32ArrayOptional x?: numberOptional xOptional y?: numberOptional yAdd several samples from JSON by reading values from instructed property names.
// Example, read x + y
const arr = [{ x: 0, y: 0 }]
DataSetXY.appendJSON(arr, { x: 'x', y: 'y' })
// Example, read custom property names
const arr = [{ timestamp: 0, voltage: 0 }]
DataSetXY.appendJSON(arr, { x: 'timestamp', y: 'voltage' })
// Example, only Y values
const arr = [{ price: 0 }]
DataSetXY.appendJSON(arr, { y: 'price' })
// Example, color values
const arr = [{ x: 0, y: 0, color: 0xff0000ff }]
DataSetXY.appendJSON(arr, { x: 'x', y: 'y', color: 'color' })
Please note that before adding optional values (lookup values, ids or colors), they need to be enabled using colors or equivalent!
Supported sample property types:
x: number, Date object or Date time stringy: number, Date object or Date time stringlookupValue: numberid: numbercolor: either Color object or number which represents a Uint32 RGBA color with Red channel being least significant byte. Note that using Color objects in large quantities should be avoided for performance reasons.
Object itself.
Array with JSON objects which represent samples.
Optional arg: { Object which informs which property names contain data. At least x or y property should always be specified.
Optional color?: keyof TOptional id?: keyof TOptional lookupOptional rotation?: keyof TOptional size?: keyof TOptional start?: numberOptional step?: numberOptional x?: keyof TOptional y?: keyof TAdd 1 sample to data set.
// Example, basic usage
DataSetXY.appendSample({ x: 0, y: 0 })
// Example, only Y value with automatic X step
DataSetXY.appendSample({ y: 0, step: 1 })
// Example, extra properties (color)
DataSetXY.appendSample({ x: 0, y: 0, color: 0xff0000ff })
Please note that before adding optional values (lookup values, ids or colors), they need to be enabled using colors or equivalent!
Supported sample property types:
x: number, Date object or Date time stringy: number, Date object or Date time stringlookupValue: numberid: numbersize: numberrotation: numbercolor: either Color object or number which represents a Uint32 RGBA color with Red channel being least significant byte. Note that using Color objects in large quantities should be avoided for performance reasons.
Object itself.
Object any data properties (x, y, lookupValue, color, id, size, rotation).
Optional color?: number | ColorOptional id?: numberOptional lookupOptional rotation?: numberOptional size?: numberOptional step?: numberOptional x?: string | number | DateOptional y?: string | number | DateAdd a list of samples to data set.
// Example, basic usage.
DataSetXY.appendSamples({
xValues: [0, 1, 2],
yValues: [100, 101, 102],
})
// Example, only Y values with automatic X step
DataSetXY.appendSamples({
yValues: [100, 101, 102],
start: 0,
step: 1,
})
// Example, typed array input.
DataSetXY.appendSamples({
yValues: new Float32Array([100, 101, 102]),
})
// Example, extra properties (color)
DataSetXY.appendSamples({
xValues: [0, 1, 2],
yValues: [100, 101, 102],
colors: [0xff0000ff, 0xff00ff00, 0xffff0000]
})
Please note that before adding optional values (lookup values, ids or colors), they need to be enabled using colors or equivalent!
Supported sample property types:
x: number, Date object or Date time stringy: number, Date object or Date time stringlookupValue: numberid: numbersize: numberrotation: numbercolor: either Color object or number which represents a Uint32 RGBA color with Red channel being least significant byte. Note that using Color objects in large quantities should be avoided for performance reasons.
offset properties can optionally be used to start reading values from middle of input array.
Can be situationally useful.
Object itself.
Object with data properties and optional behavior configurations.
Optional colors?: number[] | Uint32Array | Color[]Optional count?: numberOptional ids?: number[] | Uint32ArrayOptional lookupOptional offset?: numberOptional offsetOptional offsetOptional offsetOptional offsetOptional offsetOptional rotations?: number[] | Float32ArrayOptional sizes?: number[] | Float32ArrayOptional start?: numberOptional step?: numberOptional xOptional yAttach 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.
Clear all samples in the data set.
Object itself.
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
Load same value or many values to all samples that currently exist in the data set.
// Example, set point size of all samples to 5 pixels
DataSetXY.fill({ size: 5 })
Object itself.
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.
Read whether series rendering should be clipped to the area enclosed by its owning axes or not. All series rendering is ALWAYS clipped so that it doesn't leak outside the owning charts series area. However, it is optional whether the series rendering should be able to leak outside the series owning axes viewport, which might be smaller than the charts viewport (for example, when using stacked axes).
By default, clipping is enabled (true).
True or false.
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 active curve preprocessing mode.
CurvePreprocessing 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 current configured maximum sample count. See setMaxSampleCount for more information.
Number of undefined.
Get current shape of displayed points.
PointShape.
Unsubscribe from event when configured max sample count is exceeded.
// Example
const token = DataSetXY.onMaxSampleCountExceeded((dataSet, currentSampleCount, currentMaxSampleCount, newTotalSampleCount) => {})
DataSetXY.offMaxSampleCountExceeded(token)
Token received from subscribing to corresponding event.
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.
Subscribe to event when configured max sample count is exceeded. This can be used to add custom logic to increase max sample count or not.
DataSetXY.onMaxSampleCountExceeded((dataSet, currentSampleCount, currentMaxSampleCount, newTotalSampleCount) => {
// Example, double max sample count
dataSet.setMaxSampleCount(Math.max(currentMaxSampleCount * 2, newTotalSampleCount))
})
Token that can be used to unsubscribe from event.
Function that is triggered on event.
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
Read back the current contents of the data set.
// Read back data
const data = DataSetXY.readBack()
console.log(data)
If data cleaning (max sample count) is enabled, this can result in allocating new memory (and thus be expensive). Otherwise, a very efficient operation.
The returned values should NOT be modified.
Optionally, you can include the flag onlyInRange to find return only samples that are in specified range.
This is only supported if the data set has a "data pattern" (e.g. { dataPattern: 'ProgressiveX' }).
The range is always considered to be in the same dimension as this data pattern (e.g. X Axis).
// Example, read back data that is visible
ChartXY.getDefaultAxisX().onIntervalChange((axis, start, end) => {
const data = DataSetXY.readBack({ onlyInRange: { start, end } })
console.log(data)
})
This operation is not "pixel perfect", meaning it can often return 1 extra sample that is not visible (the next and/or previous ones).
Object with lists of separate data channels, like x coordinates, y coordinates, look up values, colors, etc.
Optional arg: { Optional onlyOptional colors?: Uint32ArrayOptional ids?: Uint32ArrayOptional lookupOptional rotations?: Float32ArrayOptional sizes?: Float32ArraySet 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 fill style of area under the series trend.
Supported fill styles:
Solid color for entire area fill.
// Example, solid colored area fill.
PointLineAreaSeries.setAreaFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
To learn more about available Color factories, see ColorRGBA
Supports following look-up modes: x, y and value.
lookUpProperty: 'x' | 'y':
Color dynamically based on x or y coordinate.
// Example, dynamic color by Y coordinates
PointLineAreaSeries.setAreaFillStyle(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.
lookUpProperty: 'value':
Color dynamically based on separately supplied value data set.
values are specified when adding data points.
// Example, dynamic color by Value data set
const series = ChartXY.addPointLineAreaSeries({ lookupValues: true })
.setAreaFillStyle(new PalettedFill({
lookUpProperty: 'value',
lut: new LUT({
interpolate: true,
steps: [
{ value: 0, color: ColorRGBA(255, 0, 0) },
{ value: 100, color: ColorRGBA(0, 255, 0) },
]
})
}))
.appendSamples({
yValues: [0, 1],
lookupValues: [0, 100]
})
Data point lookup value properties have to be explicitly enabled before they can be used, see lookupValues for more details.
To learn more about Color lookup tables, see LUT.
Color area fill with individually picked sample colors. Colors are interpolated between data points.
// Example, individual colors
const series = ChartXY.addPointLineAreaSeries({ colors: true })
.setAreaFillStyle(new IndividualPointFill())
.appendSamples({
yValues: [0, 1],
colors: [0xff0000ff, 0xff00ff00]
})
Data point color properties have to be explicitly enabled before they can be used, see colors for more details.
Color area fill with a linear gradient.
// Example, linear gradient area fill
PointLineAreaSeries.setAreaFillStyle(new LinearGradientFill())
To learn more about linear gradient configurations, see LinearGradientFill.
Color area fill with a radial gradient.
// Example, radial gradient line color
PointLineAreaSeries.setAreaFillStyle(new RadialGradientFill())
To learn more about radial gradient configurations, see RadialGradientFill.
Object 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 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 series rendering should be clipped to the area enclosed by its owning axes or not. All series rendering is ALWAYS clipped so that it doesn't leak outside the owning charts series area. However, it is optional whether the series rendering should be able to leak outside the series owning axes viewport, which might be smaller than the charts viewport (for example, when using stacked axes).
By default, clipping is enabled (true).
// Example, disable clipping, allowing the series rendering to leak outside its own axes.
SeriesXY.setClipping(false)
Object itself
Clipping enabled or disabled.
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 curve preprocessing mode. See CurvePreprocessing for more information.
// Example, enable step preprocessing
PointLineAreaSeries.setCurvePreprocessing({ type: 'step', step: 'middle' })
Object itself.
Curve preprocessing description
Set data set which the series visualizes. This can be changed at any point.
If data set is not set using this method, then the series creates it automatically as soon as data is pushed in.
// Example
const dataSet = new DataSetXY()
PointLineAreaSeries.setDataSet(dataSet)
data set object.
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
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
All real-time use cases (where data points are pushed in periodically) must define a "max sample count".
// Example, keep maximum 1 million samples
PointLineAreaSeries.setMaxSampleCount(1_000_000)
This allocates the required amount of memory beforehand, which is crucial to get the best performance. After 1 million samples are reached, the oldest samples will start dropping out.
Alternatively, if you are uncertain what value to use and don't want to allocate too much memory up-front, you can start small and automatically increase the buffer size as samples flow in:
PointLineAreaSeries.setMaxSampleCount({ mode: 'auto', max: 10_000_000 })
This would first allocate only small amount of memory, progressively increase memory allocation as samples come in until eventually limiting sample count to 10 million.
Object itself.
Max sample count.
All real-time use cases (where data points are pushed in periodically) must define a "max sample count".
// Example, keep maximum 1 million samples
PointLineAreaSeries.setMaxSampleCount(1_000_000)
This allocates the required amount of memory beforehand, which is crucial to get the best performance. After 1 million samples are reached, the oldest samples will start dropping out.
Alternatively, if you are uncertain what value to use and don't want to allocate too much memory up-front, you can start small and automatically increase the buffer size as samples flow in:
PointLineAreaSeries.setMaxSampleCount({ mode: 'auto', max: 10_000_000 })
This would first allocate only small amount of memory, progressively increase memory allocation as samples come in until eventually limiting sample count to 10 million.
Object itself.
Optional initial?: numberOptional max?: numberSet 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
Beta
Set alignment of points.
Defaults to center { x: 0, y: 0 }.
Can be used to offset points relative to their size.
// Example, position point by bottom
PointLineAreaSeries.setPointAlignment({ x: 0, y: -1 })
// Example, position point by bottom with extra gap
PointLineAreaSeries.setPointAlignment({ x: 0, y: -1.5 })
Object itself.
Released as beta feature in v5.2.0 feature may still change according to user feedback and experiences.
Alignment where values are % in range [-1, 1]. Can also be larger values, meaning offsets larger than point size.
Set fill style of markers displayed at sample locations.
Supported fill styles:
Solid color.
// Example, solid colored markers
PointLineAreaSeries.setPointFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
To learn more about available Color factories, see ColorRGBA
Supports following look-up modes: x, y and value.
lookUpProperty: 'x' | 'y':
Color dynamically based on x or y coordinate.
// Example, dynamic color by Y coordinates
PointLineAreaSeries.setPointFillStyle(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.
lookUpProperty: 'value':
Color dynamically based on separately supplied value data set.
values are specified when adding data points.
// Example, dynamic color by Value data set
const series = ChartXY.addPointLineAreaSeries({ lookupValues: true })
.setPointFillStyle(new PalettedFill({
lookUpProperty: 'value',
lut: new LUT({
interpolate: true,
steps: [
{ value: 0, color: ColorRGBA(255, 0, 0) },
{ value: 100, color: ColorRGBA(0, 255, 0) },
]
})
}))
.appendSamples({
yValues: [0, 1],
lookupValues: [0, 100]
})
Data point lookup value properties have to be explicitly enabled before they can be used, see lookupValues for more details.
To learn more about Color lookup tables, see LUT.
Color by individually picked sample colors. Colors are interpolated between data points.
// Example, individual colors
const series = ChartXY.addPointLineAreaSeries({ colors: true })
.setPointFillStyle(new IndividualPointFill())
.appendSamples({
yValues: [0, 1],
colors: [0xff0000ff, 0xff00ff00]
})
Data point color properties have to be explicitly enabled before they can be used, see colors for more details.
ImageFill (beta feature, introduced in v5.2.0):
Display custom images.
// Example syntax
const image = new Image()
image.src = 'my-asset.png'
const pointSeries = chart.addPointLineAreaSeries({ dataPattern: null })
.setAreaFillStyle(emptyFill)
.setStrokeStyle(emptyLine)
.setPointFillStyle(new ImageFill({ source: image }))
.appendSample({ x: 0, y: 0 })
Please note that when ImageFill is used, Point line area series behaves a little bit differently:
PointShape.Square1.Color with a linear gradient.
// Example, linear gradient area fill
PointLineAreaSeries.setPointFillStyle(new LinearGradientFill())
To learn more about linear gradient configurations, see LinearGradientFill.
Color with a radial gradient.
// Example, radial gradient line color
PointLineAreaSeries.setPointFillStyle(new RadialGradientFill())
To learn more about radial gradient configurations, see RadialGradientFill.
Object 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.
// Example syntax, rotate 45 degrees
PointLineAreaSeries.setPointRotation(45)
Point rotations can also be configured individually, see DataSetXY.rotations for more information.
Rotation angle in degrees
Set shape of displayed points, markers.
// Example syntax
PointLineAreaSeries.setPointShape(PointShape.Square)
All valid options are listed under PointShape
Object itself for fluent interface.
point shape enum
Beta
Set shape of displayed points as a Custom Icon. This allows using any custom bitmap as the shape of displayed points.
// Example usage
const image = new Image()
image.src = 'my-image.png'
PointLineAreaSeries.setPointShape(chart.engine.addCustomIcon(image))
Object itself for fluent interface. Released as beta feature in v5.2.0 feature may still change according to user feedback and experiences.
Icon object.
Set size of point in pixels.
Point sizes can also be configured individually, see DataSetXY.sizes for more information.
Object itself for fluent interface.
Size of point in pixels.
Re-specify all values in the data set. This is a convenience method that is fundamentally equal to:
DataSetXY.clear().appendSamples({ ... })
There are currently no performance differences between using "setSamples" versus "clear + append".
However, in future it is possible that setSamples can receive optimizations which would make it recommended over "clear + append".
In the mean-time, setSamples is recommended for simplicity and clarity in end user applications.
For parameters documentation, refer to appendSamples method.
Object itself.
Object with data properties and optional behavior configurations.
Optional colors?: number[] | Uint32Array | Color[]Optional count?: numberOptional ids?: number[] | Uint32ArrayOptional lookupOptional offset?: numberOptional offsetOptional offsetOptional offsetOptional offsetOptional offsetOptional rotations?: number[] | Float32ArrayOptional sizes?: number[] | Float32ArrayOptional start?: numberOptional step?: numberOptional xOptional ySet stroke style of Series.
Supported line styles:
// Example syntax, specify LineStyle
PointLineAreaSeries.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorHEX('#F00') })
}))
// Example syntax, change active LineStyle
PointLineAreaSeries.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.
PointLineAreaSeries.setStrokeStyle((stroke) => stroke.setThickness(-1))
Supported fill styles:
Solid color for entire line series.
// Example, solid colored line.
PointLineAreaSeries.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) })
}))
To learn more about available Color factories, see ColorRGBA
Line series supports following look-up modes: x, y and value.
lookUpProperty: 'x' | 'y':
Color line stroke dynamically based on x or y coordinate.
// Example, dynamic color by Y coordinates
PointLineAreaSeries.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.
lookUpProperty: 'value':
Color line stroke dynamically based on separately supplied value data set.
values are specified when adding data points.
// Example, dynamic color by Value data set
const series = ChartXY.addPointLineAreaSeries({ lookupValues: true })
.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new PalettedFill({
lookUpProperty: 'value',
lut: new LUT({
interpolate: true,
steps: [
{ value: 0, color: ColorRGBA(255, 0, 0) },
{ value: 100, color: ColorRGBA(0, 255, 0) },
]
})
})
}))
.appendSamples({
yValues: [0, 1],
lookupValues: [0, 100]
})
Data point lookup value properties have to be explicitly enabled before they can be used, see lookupValues for more details.
To learn more about Color lookup tables, see LUT.
Color line stroke with individually picked sample colors. Line segment colors are interpolated between data points.
// Example, individual colors
const series = ChartXY.addPointLineAreaSeries({ colors: true })
.appendSamples({
yValues: [0, 1],
colors: [0xff0000ff, 0xff00ff00]
})
.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new IndividualPointFill()
}))
Data point color properties have to be explicitly enabled before they can be used, see colors for more details.
Color line stroke with a linear configurable gradient palette.
// Example, linear gradient line color
PointLineAreaSeries.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
PointLineAreaSeries.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new RadialGradientFill()
}))
To learn more about radial gradient configurations, see RadialGradientFill.
Object itself for fluent interface.
Either a LineStyle object or a function, which will be used to create a new LineStyle based on current value.
Set element visibility.
Object itself.
true when element should be visible and false when element should be hidden.
Method for solving the nearest data point to a given coordinate on screen.
// Example syntax
chart.onSeriesBackgroundMouseClick((_, event) => {
const nearest = series.solveNearest(event, 'show-nearest')
console.log(nearest)
})
SolveResult object or undefined.
Reference coordinate on web page as client coordinates. This can for example be directly an Event object.
Optional control for solve nearest behavior
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.
Series that can visualize any combination of Lines, Points and Area filling.
Also supports different preprocessing options (step/spline/disabled).
This series is a beta version with severe performance optimizations compared to old XY series. It is significantly more memory efficient and can handle much more data more efficiently than the old series versions.
It introduces drafts for new end user APIs for many purposes, like more logical automatic data cleaning configuration, modifying visualization type during run-time, etc.
For beta purposes, this is introduced as a separate series type. After official release, it will merge into the old APIs, like addLineSeries, addPointSeries, etc.
For more information and documentation, please see "XY features rework" in Developer Documentation. https://lightningchart.com/js-charts/docs/more-guides/beta-xy/
Creating PointLineAreaSeries:
PointLineAreaSeriesare created with addPointLineAreaSeries method.Some properties of
PointLineAreaSeriescan only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:To learn about available properties, refer to PointLineAreaSeriesOptions.
Examples:
Different data visualizations can be achieved simply by changing the style of the series.