Class ParallelCoordinateChart<CursorResultTableBackgroundType>

Add manually controlled Cursor object. These have exactly same functions as built-in cursors but they can be freely controlled by application logic.

 const cursor = chart.addCursor()

Styling works same as built-in cursors (e.g. setCursor).

Position is set using setPosition method and displayed content using setResultTable(table => table.setContent(...)) For more details, see Developer documentation > Features > Cursor > Manual cursors

Returns

Cursor object.

Add 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:

• If your development environment has 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.
• Otherwise, open the class section in API documentation and check out which interface K type parameter extends.

Add a legendbox.

Legendbox is a type of UI element, that floats inside the chart/component it is created inside. It can be freely moved around with user interactions, as well as positioned in application code.

The purpose of legendbox is to describe the series and other visual components of the chart, by displaying their names and colors. Hovering over a series' legendbox entry will highlight that series, and clicking on the entry will toggle that series' visibility.

Legendbox alignment:

Alignment of legendbox can be selected by supplying one of the available LegendBoxBuilders to addLegendBox:

 // Default (vertical) LegendBox.
 const legendBox = ChartXY.addLegendBox()

 // Horizontal LegendBox.
 const horizontalLegendBox = ChartXY.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)

Custom Legendbox positioning:

By default LegendBoxes are placed on the right side, or bottom of the chart (depending on alignment).

A custom location can be configured with UIElement API:

• setPosition
• setOrigin
• setMargin

Position coordinate system is specified when creating legendbox.

1. LegendBox with default positioning coordinate system.

 addLegendBox( LegendBoxBuilders.VerticalLegendBox )
     // Position = [0, 100] as percentages.
     .setPosition({ x: 50, y: 50 })

2. Position in pixel coordinate system.

 addLegendBox( LegendBoxBuilders.VerticalLegendBox, chart.coordsRelative )
     // Position = pixels.
     .setPosition({ x: 300, y: 100 })

3. Position on Axes.

 addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
     // Position = Axis values.
     .setPosition({ x: 5, y: 5 })

For more information on LegendBox features, and usage, see LegendBox.

Returns

LegendBox

Add a series to the chart.

 // Example syntax
 chart.addSeries()
     .setName('Sample 1')
     .setData({
         A: 10,
         B: 21,
         C: 0.023
     })

Data should match currently existing axes in the chart setAxes.

Returns

Series object.

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

Returns

Object itself for fluent interface

Iterate over each Axis of Chart.

Returns

Object itself.

Get reference to a ParallelCoordinateAxis object based on an ID (string | number`).

This ID should be same value used when the Axes of the chart are defined in setAxes. This method throws an Error if the requested Axis is not found!

 // Example syntax
 const Axes = {
     Weight: 0,
     Height: 1,
     'Eye color': 2,
 }
 chart.setAxes(Axes)
 const axisHeight = chart.getAxis(Axes.Height)

hasAxis can be used to check if Axis exists without throwing errors.

Returns

Axis object.

Get reference to the built-in cursor object of the chart.

Returns

Generic cursor object.

Get active cursor formatter.

Returns

Cursor formatter.

Get current cursor behavior.

Returns

SolveNearestMode or undefined

Get minimum size of Chart. Depending on the type of class this value might be automatically computed to fit different elements.

Returns

Vec2 minimum size or undefined if unimplemented

Get stroke style of series that is pointed by cursor.

Get series of a chart

Returns

Array of series

Get thickness of normal series lines as pixels.

Returns

Number.

Get color of series that are unselected, meaning they are outside the range of an existing Range Selector.

Get currently active user interaction scheme. This does NOT return the last value supplied to setUserInteractions. Rather, it considers the current structure of the chart, all built-in defaults as well as overrides supplied by the user and returns the currently used interaction scheme.

Returns

ParallelCoordinateChartInteractions

Introduced in v7.0.0. API may change according to user feedback.

Check if specific Axis exists based on an ID (string | number`). This ID should be same value used when the Axes of the chart are defined in setAxes.

 // Example syntax
 const Axes = {
     Weight: 0,
     Height: 1,
     'Eye color': 2,
 }
 chart.setAxes(Axes)
 chart.hasAxis(Axes.Height) // true

Returns

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)
 })

Set axes of the parallel coordinate chart as a list of strings.

 // Example syntax
 chart.setAxes(['A', 'B', 'C'])

These values end up being used as the key property of the created Axes, and should match the keys of your data set.

 // Matching data
chart.addSeries().setData({
    A: 1,
    B: 2,
    C: 3,
})

Returns

Object itself.

Set axes of the parallel coordinate chart as an JavaScript object. The keys of the object are read as the list of Axes that the chart should contain.

 // Example syntax
 const Axes = {
     Weight: 0,
     Height: 1,
     'Eye color': 2,
 }
 chart.setAxes(Axes)

Returns

Object itself.

Style chart cursor using a callback function. Available style APIs can depend on the type of chart.

 // Example syntax
 chart.setCursor((cursor) => cursor
     .setGridStrokeXStyle(new SolidLine({
         thickness: 1,
         fillStyle: new SolidFill({ color: ColorRGBA( 255, 0, 0 ) })
     }))
 )

See Cursor2D, CursorXY or Cursor3D for all available methods for configuring the cursor.

Example usage:

 // Example 1, disable Y Axis tick marker & grid line.
 chart.setCursor((cursor) => cursor
     .setTickMarkerYVisible(false)
     .setGridStrokeYStyle(emptyLine)
 )

 // Example 2, style cursor ResultTable.
 chart.setCursor((cursor) => cursor
     .setResultTable((resultTable) => resultTable
         .setOrigin(UIOrigins.LeftTop)
         .setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
         .setTextFont((font) => font
             .setSize(12)
             .setFamily('sans-serif')
         )
         .setBackground((background) => background
             .setFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 0) }))
         )
     )
 )

 // Example 3, style cursor TickMarker X.
 chart.setCursor((cursor) => cursor
     .setTickMarkerX((tickMarker: UIPointableTextBox) => tickMarker
         .setTextFont((font) => font.setWeight('bold'))
         .setTextFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))
         .setBackground((background) => background.setFillStyle(emptyFill).setStrokeStyle(emptyLine)),
     )
 )

Returns

Object itself for fluent interface.

Set cursor formatting, controlling the text displayed in built-in cursor.

 chart.setCursorFormatting((_, hit, hits) => {
     return [
         ['Cursor pointing at'],
         [hit.series], // returning a series will display the series color and its name automatically.
         ['X', '', hit.axisX.formatValue(hit.x)], // utilizing axis formatValue is useful for considering active zoom level and type of axis
         ['Y', '', hit.y.toFixed(2)], // empty string '' results in gap between cells
         [{ text: 'Example', font: { weight: 'bold' }, fillStyle: fillRed }] // any cell can also be styled individually
     ]
 })

Before overriding default cursor formatting, it is recommended to check if using setUnits or configuring Axis cursor formatting would be enough.

In order to use series specific data properties (e.g. Heatmap sample "intensity"), you should use type guards to assert the type of the SolveResult:

 // Example of using type guard in cursor formatter
 Chart.setCursorFormatting((chart, hit, hits) => {
     if (!isHitHeatmap(hit)) return undefined
     return [hit.intensity.toFixed(1)]
 })

More details in Developer documentation (Features > Cursor).

Returns

Object itself

Set cursor behavior. This affects both built-in cursor as well as any custom cursor connected using setCustomCursor.

For possible values see SolveNearestMode. Additionally, you can supply undefined value to disable cursor completely.

 // Example, show 1 nearest solve result only
 chart.setCursorMode('show-nearest')

 // Example, disable cursor
 chart.setCursorMode(undefined)

 // Example, enable interpolation
 chart.setCursorMode('show-all-interpolated')

Returns

Object itself

Connect a custom cursor to the chart. This has 2 effects:

1. The built-in cursor is disabled.
2. The provided callback function is called whenever the custom cursor should be updated, along with the data that the cursor should be pointing at.

Custom cursors are still affected by other cursor behavior controls such as:

• setCursorMode
• Series setCursorEnabled

The custom cursor can be anything defined by the user, such as:

• Using other LCJS means of displaying the cursor, like custom ticks, constant lines, text boxes, etc.
• Displaying a cursor using HTML/JS/CSS
• Displaying a cursor using UI framework, like Angular, React, Vue, Next, ...

 // Example of plugging in a custom cursor
 chart.setCustomCursor((event) => {
     if (event) {
         // Display custom cursor
     } else {
         // Hide custom cursor
     }
 })

Returns

Object itself

Configure series coloring by a Value-Color Table. In a Parallel coordinate chart, you can optionally specify one Axis which dictates coloring of all series based on their value along that particular Axis.

 // Example syntax
 chart.setLUT({
     axis: chart.getAxis('Height'),
     lut: new LUT({
         interpolate: true,
         steps: [
             { value: 150: ColorRGBA(255, 0, 0) },
             { value: 200: ColorRGBA(0, 0, 255) },
         ]
     })
 })

Returns

Object itself.

Set stroke style of series that is pointed by cursor.

 // Example syntax
 chart.setPointedSeriesStrokeStyle(new SolidLine({
     thickness: 2,
     fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) })
 }))

Returns

Object itself.

Set thickness of normal series lines as pixels.

 // Example syntax, 2 pixel stroke
 chart.setSeriesStrokeThickness(2)

Returns

Object itself.

Set whether built-in spline interpolation is enabled or disabled. This is enabled by default.

 // Example, disable spline
 chart.setSpline(false)

 // Example, enable spline and specify resolution to use
 chart.setSpline(true, { resolution: 16 }) // 32 is default

Spline interpolation is somewhat heavy and can be disabled for better performance.

Returns

Object itself.

Set color of series that are unselected, meaning they are outside the range of an existing Range Selector.

 // Example syntax
 chart.setUnselectedSeriesColor(ColorRGBA(255, 255, 255, 30))

Returns

Object itself.

Configure user interactions from a set of preset options.

Without any explicit configuration, the charts select the default user interaction scheme based on available information, such as axis types, attached series and data supplied to series.

The setUserInteraction methods allow explicitly configuring the used interaction scheme.

 // Example, disable all user interactions
 chart.setUserInteractions(undefined)

 // Example, remove select range selector interactions
 chart.setUserInteractions({
     rangeSelectors: {
         create: {
             doubleClickAxis: false,
         },
         dispose: {
             doubleClick: false,
         },
     },
 })

Returns

Object itself.

Introduced in v7.0.0. API may change according to user feedback.