Parallel Coordinate Chart

The Parallel Coordinate Chart can be used to display a list of data points across an arbitrary number of measurement Axes. Each data point is displayed as a series of connected points along the axes which are positioned parallel to each other:

// Creation of a Parallel coordinate chart
const lc = lightningChart()
const chart = lc.ParallelCoordinateChart()

Axes

Constructing a Parallel coordinate chart starts with defining the axes. The general recommended syntax is like this:

const Axes = {
    Weight: 0,
    Height: 1,
    'Property with space': 2
}
chart.setAxes(Axes)

Afterwards, Axis objects can be referenced using getAxis method:

const axisWeight = chart.getAxis(Axes.Weight)

There is no hard limit on the possible number of Axes, the only logical bottleneck is the available space in horizontal direction.

For more documentation, please see common Axis section.

Adding data

In a parallel coordinate chart, one data point is represented with 1 Series object. The data point has 1 Number data property per every Axis in the chart:

chart.addSeries().setName('Sample name').setData({
    Weight: 71,
    Height: 171,
    'Property with space': 10,
})

You can have up to hundreds of thousands of series in a parallel coordinate chart. For heavy applications, be sure to check out Performance optimizations.

Performance optimizations

Parallel coordinate charts with a lot of data points are quite heavy on GPU. Below you can find the most effective configurations to optimize performance:

chart.setCursorMode('show-nearest')     // show only 1 data point with cursor at a time
chart.setSpline(false)                  // disable curved lines
chart.setSeriesStrokeThickness(-1)      // 1 px non-smoothed lines for smallest GPU strain

Coloring by value

Parallel coordinate chart has built-in LUT (color lookup table) functionality, which allows dynamic coloring of series based on their value along a specific Axis:

chart.setLUT({
    axis: chart.getAxis(Axes.accuracy),
    lut: new LUT({
        interpolate: true,
        steps: [
            { value: 0.0, color: ColorRGBA(255, 0, 0) },
            { value: 0.5, color: ColorRGBA(255, 255, 0) },
            { value: 1.0, color: ColorRGBA(0, 255, 0) },
        ],
    }),
})

Range selectors

Parallel coordinate chart has a powerful data analysis tool built-in - Range Selectors.

A range selector defines a value range [start, end] along 1 specific Axis, and highlights the series whose value is within that range:

chart.getAxis(Axes.accuracy).addRangeSelector().setInterval(0.9, 1.0)

Range selectors can be created in two ways:

1. Built-in user interaction, double click on any Axis to create a Range selector there.

2. Programmatically, using Axis.addRangeSelector method, like in above example.

Range selectors can also be freely moved/resized by dragging on them, or deleted by double clicking on one. This makes Range selectors a powerful exploratory data analysis tool that allows the user to find relations in data.

You can also connect custom data analysis scripts to interact with the user interactions, for example:

chart.addEventListener('seriesselect', (event) => {
    // `event` contains data that user has currently highlighted
    console.log(event.selectedSeries.map((series) => series.getData()))
})

If the chart contains several Range selectors, then only series that pass all the conditions are highlighted.

Indicating value thresholds

A common use case is to display value thresholds on different axes. E.g. which value range is bad and which is good. This can be done by styling the Axis stroke style with a PalettedFill:

chart.getAxis(Axes['Variable A']).setStrokeStyle(
    new SolidLine({
        thickness: 4,
        fillStyle: new PalettedFill({
            lookUpProperty: 'y',
            lut: new LUT({
                interpolate: false,
                steps: [
                    // 0-50 = good
                    { value: 0, color: ColorCSS('green') },
                    // > 50 bad
                    { value: 50, color: ColorCSS('red') },
                ],
            }),
        }),
    }),
)

Curved lines

By default, Parallel coordinate chart applies built-in curve interpolation to the data visualization. This can be disabled using setSpline method:

// Disable curved lines
chart.setSpline(false)

Chart title

chart
    .setTitle('Voltage')
    .setTitleFont(font => font.setSize(10).setFamily('Segoe UI'))
    .setTitleFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

For more details about style API, please see Styles, colors and fonts.

Background style

ParallelCoordinateChart has 3 different levels of backgrounds:

• Series background (area enclosed by axes)
• Chart background (entire chart area)
• Engine background (additional background shared by entire engine)
  • Understanding difference between chart/engine background is mainly useful if you are using the legacy Dashboard feature - in this case, engine background is shared across the whole dashboard.

chart
    .setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))
    .setSeriesBackgroundStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 255) }) }))
chart.engine.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 255) }))

For more details about style API, please see Styles, colors and fonts.

Space around chart

chart.setPadding({ left: 10, right: 10, top: 10, bottom: 10 })

Disable animations

const chart = lc.ParallelCoordinateChart({ animationsEnabled: false })

User interactions

Built-in user interactions can be disabled individually, or all at once:

chart.setMouseInteractionRangeSelectors(false)

List of all user built-in user interactions (or methods which toggle them):

• setMouseInteractionRangeSelectors

// Disable all interactions
chart.setMouseInteractions(false)

Custom user interactions can be implemented using the Events API:

chart.seriesBackground.addEventListener('click', (event) => {
    console.log('user clicked series area', event)
})

Coordinate translations

LightningChartJS has a number of different coordinate systems that are not natively present on a web page - most importantly, the charts Axes.

In many data visualization use cases it is critical to add annotations or markers at specific coordinates along the Axes and data series. Because of this, the ability to translate between coordinates on the web page and the axes is critical.

In this context, "client" refers to the Web API Client coordinate system.

Translating client coordinate to Axis

chart.seriesBackground.addEventListener('click', (event) => {
    const locationAxis = chart.translateCoordinate(event, chart.coordsAxis)
})

Translating Axis coordinate to client

const locationAxis = { x: 0, y: 0 }
const locationClient = chart.translateCoordinate(locationAxis, chart.coordsAxis, chart.coordsClient)

Relative coordinate system

Apart from the widely used "axis" and "client" coordinate system, there is another, the "relative" coordinate system. This is mostly utilized for LightningChart UI components that are positioned as pixel locations relative to the chart (e.g. 10 pixels from left edge etc.).

// Example, translate axis to relative coordinate
const locationAxis = { x: 0, y: 0 }
const locationRelative = chart.translateCoordinate(locationAxis, chart.coordsAxis, chart.coordsRelative)

Cursors

Please see common Cursors section.

Legend

warning

Parallel coordinate chart Legend behavior is slightly different from other charts. User has to explicitly add every series they want displayed in the legend by using Legend.add(series)

This is because Parallel coordinate charts can often have a large number of series.

Please see common Legend section.

Positioning charts

Please see common Positioning charts section.

Color themes

Please see common Color themes section.