Protected _shadingAppend a single XYZ coordinate or list of coordinates into the series.
// Example, add single data point.
pointSeries.add({ x: 0, y: 0, z: 0 })
// Example, add list of data points.
pointSeries.add([
{ x: 0, y: 100, z: 50 },
{ x: 10, y: 50, z: 150 },
{ x: 20, y: 75, z: 100 },
])
Performance-wise, it is more efficient to call add just 1 time with an Array of points, instead of calling add several times with 1 point at a time.
Data points can also be grouped with extra optional properties:
size | Point size.color | Point color.value | Point value for dynamic coloring.setPointStyle method documentation contains detailed information about each of these features and how to use them.
Object itself for fluent interface.
Optional options: LCJSAddEventListenerOptionsAttach 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 previously pushed data points from the series.
// Example usage
pointSeries.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.
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 normal points style.
PixelatedPoints3D
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
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.
Set Color Shading Style for series.
Shading style changes the visual style of the rendering. See ColorShadingStyles for available shading styles.
Use Simple color shading style:
series3D.setShadingStyle(new ColorShadingStyles.Simple())
Use Phong color shading style:
series3D.setShadingStyle(new ColorShadingStyles.Phong())
Configuring specular highlight for Phong shading style:
series3D.setShadingStyle(new ColorShadingStyles.Phong({
specularReflection: 0.5,
specularColor: ColorRGBA(255, 255, 255)
}))
Object itself for fluent interface.
Color shading style to use for this series.
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 3D depth test enabled for this series.
By default this is enabled, meaning that any series that is rendered after this series and is behind this series will not be rendered.
Can be disabled to alter 3D rendering behavior.
// Example syntax, disable depth test.
pointSeries3D.setDepthTestEnabled(false)
Object itself for fluent interface.
Depth test enabled?
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 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 style of Series.
Example syntax:
// Example syntax, Specify new style
pointCloudSeries3D.setPointStyle( new PointStyle3D.Pixelated({
size: 10,
fillStyle: new SolidFill({ color: ColorHEX('#FFF') })
}) )
// Example syntax, Change point color
pointCloudSeries3D.setPointStyle( (pointStyle) => pointStyle
.setFillStyle( new SolidFill({ color: ColorHEX('#FFF') }) )
)
// Example syntax, Change point size
pointCloudSeries3D.setPointStyle( (pointStyle) => pointStyle
.setSize( 10 )
)
Point coloring:
Color of points is configured by the fillStyle property of active point style.
Here is a list of all supported fill styles with feature descriptions and example syntax:
Solid color for all points in series.
// Example syntax, solid points color.
pointCloudSeries3D.setPointStyle(new PointStyle3D.Pixelated({
fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }),
size: 10
}))
Look-up dynamic per-point color based on a look up property (number) and a color look up table (LUT).
// Example syntax, dynamic points color.
pointCloudSeries3D.setPointStyle(new PointStyle3D.Pixelated({
fillStyle: new PalettedFill({
// lookUpProperty defines basis of selecting look up value (number).
lookUpProperty: 'value',
// lut defines table for mapping look up value (number) to a color.
lut: new LUT({
interpolate: true,
steps: [
{ value: 0, color: ColorRGBA(0, 0, 0) },
{ value: 1, color: ColorRGBA(255, 0, 0) }
]
})
}),
size: 10
}))
pointCloudSeries3D supports several different look-up modes:
lookUpProperty: 'value':
IMPORTANT: In order to use value property on data points, the feature has to be explicitly activated when the series is created:
// Example syntax, enable individual data point values.
const pointCloudSeries3D = chart3D.addPointSeries({
type: PointSeriesTypes3D.Pixelated,
individualLookupValuesEnabled: true
})
value property is then added for every data point along side x, y and z:
// Example syntax, individual data point values.
pointCloudSeries3D.add([
{ x: 0, y: 0, z: 0, value: 0 },
{ x: 1, y: 0, z: 2, value: 1 },
])
Look-up value is read from data point value property.
lookUpProperty: 'x':
Look-up value is set to data point x coordinate on Axis.
lookUpProperty: 'y':
Look-up value is set to data point y coordinate on Axis.
lookUpProperty: 'z':
Look-up value is set to data point z coordinate on Axis.
Supply individual color for each data point.
IMPORTANT: In order to use IndividualPointFill, the feature has to be explicitly activated when the series is created:
// Example syntax, enable individual data point colors.
const pointCloudSeries3D = chart3D.addPointSeries({
type: PointSeriesTypes3D.Pixelated,
individualPointColorEnabled: true
})
color property is then added for every data point along side x, y and z:
// Example syntax, individual data point colors.
pointCloudSeries3D.add([
{ x: 0, y: 0, z: 0, color: ColorRGBA(255, 0, 0) },
{ x: 1, y: 0, z: 2, color: ColorRGBA(0, 255, 0) },
])
Point size:
Size of points is configured by the size property of active point style.
If required, points can also be individually sized by adding a size property to data points.
IMPORTANT: In order to use size property, the feature has to be explicitly activated when the series is created:
// Example syntax, enable individual data point size.
const pointCloudSeries3D = chart3D.addPointSeries({
type: PointSeriesTypes3D.Pixelated,
individualPointSizeEnabled: true
})
size property is then added for every data point along side x, y and z:
// Example syntax, individual data point sizes.
pointCloudSeries3D.add([
{ x: 0, y: 0, z: 0, size: 5 },
{ x: 1, y: 0, z: 2, size: 10 },
])
Object itself for fluent interface
A PixelatedPoints3D object, or a function which modifies the current style.
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 element visibility.
Object itself.
true when element should be visible and false when element should be hidden.
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 type for visualizing a collection of
{ x, y, z }coordinates by different 2D markers.PointCloudSeries3Dis optimized for massive amounts of data - here are some reference specs to give an idea:Creating PointCloudSeries3D:
PointCloudSeries3Dare created with addPointSeries method.Some properties of
PointCloudSeries3Dcan 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 PointSeriesOptions3D.
Frequently used methods:
Related information:
There is another series type for visualizing large sets of 3D coordinates with markers: PointSeries3D
PointSeries3Dworks otherwise same, except that it renders markers with 3D geometry, with a collection of different shape options, like 3D boxes or spheres. For this reason,PointCloudSeries3Dis significantly faster thanPointSeries3D!The main difference between
PointSeries3DandPointCloudSeries3Dis thatPointCloudSeries3Ddon't have depth, so they have same size regardless of how far they are from the camera.