v5.x -> v6.x

When upgrading, please reference each of the below LCJS entries in your application (for example, using Search functionality in your code base).

For each code block found this way, refer to the corresponding migration guide.

Cursors

v6.0.0 introduces many new built-in cursor features such as:

• Multi-series cursors
• 3D cursors

To make this possible, the API has been greatly changed. For migration, please check every method listed below one at a time throughout your codebase.

tip

When migrating from old cursor API, we strongly recommend completely removing (or commenting out) all usage of old Cursor API first and see how the new cursors behave out of the box at first.

With the new cursors we have invested a lot of effort into default behavior - the cursors consider aspects like axis types and attached series to function logically without user explicitly configuring them.

Rather than using the migration guide, we recommend to start with the default behavior and then apply any desired tweaks by referring to the new Cursor documentation.

setCursorResultTableFormatter

This method is used in almost every LCJS application currently. Before, it existed usually on "per series" basis, except with some chart types (such as MapChart, BarChart, ...).

Starting with v6.0.0, cursor formatting is ALWAYS defined "per chart", using setCursorFormatting method. Additionally, the syntax of the method is slightly simplified, by removing the concept of "table content builder".

// -Before-
lineSeries.setCursorResultTableFormatter((builder, series, x, y, dataPoint) => builder
    .addRow(series.getName())
    .addRow(series.axisX.formatValue(x))
    .addRow('Price', '', series.axisY.formatValue(y))
)

// -After-
chartXY.setCursorFormatting((chart, hit) => [
    hit.series, // Passing series object displays its name and color
    hit.axisX.formatValue(hit.x),
    ['Price', '', hit.axisY.formatValue(hit.y)]
])

While slightly streamlined, the difference is functionally quite minimal.

setAutoCursor

Simply renamed to setCursor, functionality is the same.

AutoCursorModes

AutoCursorModes is removed. It's indirect replacement is SolveNearestMode.

Before	After
AutoCursorModes.disabled	undefined
AutoCursorModes.snapToClosest	"show-nearest"
AutoCursorModes.onHover	"show-pointed"

In addition to this, SolveNearestMode can also control interpolation behavior, multi-series cursor behavior and it is shared by both Cursor API and Solve nearest API.

setAutoCursorMode

Renamed to setCursorMode. Parameter changed from AutoCursorModes to SolveNearestMode.

setCursorInterpolationEnabled

Cursor interpolation can no longer be controlled on a "per series" basis. It has been moved up to "per chart" basis, and is controlled using setCursorMode.

// -Before-
series.setCursorInterpolationEnabled(true)  // enable interpolation
series.setCursorInterpolationEnabled(false) // disable interpolation

// -After-
chart.setCursorMode('show-nearest-interpolated')    // enable interpolation
chart.setCursorMode('show-nearest')                 // disable interpolation

setCursorSolveBasis

Manual configurations for cursor solve basis have been removed. This is now detected automatically by the library, depending on the series type and configuration.

• For series with no data pattern, "nearest" basis is used.
• For series with progressive X pattern, "nearest-x" basis is used.
• For series with progressive Y pattern, "nearest-y" basis is used.

setResultTableAutoTextStyle, setTickMarkerXAutoTextStyle, setTickMarkerYAutoTextStyle

For time being, "auto text style" functionalities are removed. As an indirect replacement, you can display the series color as an automatically colored circle in cursor result tables using setCursorFormatting method. This can be seen with default formatting.

Furthermore, it is possibly to specify color of any text part within a result table using the setCursorFormatting API. If you would like to see the "auto text style" functionality reintroduced in future LCJS versions, please let us know.

AutoCursor, AutoCursor2DBuilder, AutoCursorBuilders, AutoCursorXY, AutoCursorXYBuilder, setAutoCursorEnabledDuringAxisAnimation, autoCursorBuilder

These have simply been renamed:

• AutoCursor -> Cursor
• AutoCursor2DBuilder -> CursorBuilder2D
• AutoCursorBuilders -> CursorBuilders
• AutoCursorXY -> CursorXY
• AutoCursorXYBuilder -> CursorBuilderXY
• setAutoCursorEnabledDuringAxisAnimation -> setCursorEnabledDuringAxisAnimation
• autoCursorBuilder -> cursorBuilder

All Cursor formatter types

e.g. BoxSeriesFormatter, BarChartResultTableFormatter, PolarSeriesFormatter. All these types are removed and replaced with "per chart" variants, such as:

• PieChartCursorFormatter
• BarChartCursorFormatter
• etc...

solveNearestFromScreen

Method renamed to solveNearest. Previously two method signatures existed, one of which was deprecated since v4.2, which accepted so called "engine coords" as parameter. This deprecated signature is now removed, and the method now always excepts client coordinates! ({ clientX: number, clientY: number })

Some implementations of solveNearestFromScreen also previously accepted a second, optional parameter interpolate?: boolean. This has been replaced with solveMode?: SolveNearestMode:

// -Before-
lineSeries.solveNearestFromScreen(event, false)     // interpolate disabled
lineSeries.solveNearestFromScreen(event, true)      // interpolate enabled

// -After-
lineSeries.solveNearest(event, 'show-nearest')                  // interpolate disabled
lineSeries.solveNearest(event, 'show-nearest-interpolated')     // interpolate enabled

addChartMarkerXY

The feature of "Chart markers" has been removed with no direct replacement. They were widely unused and even in cases where they were confirmed to have been used, there were better replacements available.

Their usage should be replaced with one or combinations of:

• UI text boxes
• Custom ticks
• Point series
• Manual cursors (new)

Manual cursors are a new API that is very close to that of previous "chart markers". They are functionally equal to normal cursors, but are managed manually by user rather than automatically by interacting with charts. Manual cursors are created with chart.addCursor() method.

addMarker

The feature of "Series markers" has been removed with no direct replacement. They were widely unused and even in cases where they were confirmed to have been used, there were better replacements available.

Their usage should be replaced with one or combinations of:

• UI text boxes
• Custom ticks
• Point series
• Manual cursors (new)

Manual cursors are a new API that is very close to that of previous "series markers". They are functionally equal to normal cursors, but are managed manually by user rather than automatically by interacting with charts. Manual cursors are created with chart.addCursor() method.

Gauge Chart

The Gauge Chart module has undergone a comprehensive rework for improved visual look, new built-in functionality and better adaptivity to different user interfaces. To allow this, the end user API has been reworked:

// Before
const gauge = lightningChart().Gauge()
    .setAngleInterval(225, -45)

const slice = gauge
    .getDefaultSlice()
    .setInterval(0, 100)
    .setValue(50)

// After
const gauge = lightningChart().Gauge()
    .setAngleInterval(225, -45)
    .setInterval(0, 100)
    .setValue(50)

Changes overview:

• Removed GaugeChartTypes, RadialGauge, SolidGauge
  • As before, there is only one Gauge type available, which can be created with lightningChart().Gauge()
• Removed GaugeSlice, SolidGaugeSlice
  • The concept of gauge slice no longer exists, the equivalent methods are now available directly on the GaugeChart object.
• Data label has been renamed to value label
  • For example, setDataLabelFont is now setValueLabelFont
• Interval labels have been renamed to ticks
  • For example, setIntervalLabelFormatter is now setTickFormatter

To migrate your previous gauge applications, we recommend to check out the Gauge feature section on how to use the new API.

Changes to Theme interface

The following new properties have been added to Theme interface. If you are not using built-in themes or latest version of lcjs-themes, then you need to define these new properties in your custom theme(s):

• gaugeChartBarThickness - thickness of gauge chart bar
• gaugeChartValueIndicatorThickness - thickness of gauge chart value indicator bars
• gaugeChartRoundedEdges - whether gauge chart bars have rounded edges or not
• gaugeChartNeedleLength - length of gauge chart needle as pixels
• gaugeChartNeedleAlignment - alignment of gauge chart needle
• gaugeChartNeedleFillStyle - fill style of gauge chart needle
• gaugeChartNeedleThickness - thickness of gauge chart needle
• gaugeChartNeedleStrokeStyle - stroke style of gauge chart needle
• gaugeChartStartAngle - start angle of gauge chart
• gaugeChartEndAngle - end angle of gauge chart
• gaugeChartGapBetweenBarAndValueIndicators gap between gauge chart bar and value indicator bars
• gaugeChartBarColor - default color of gauge chart bar
• gaugeChartGlowColor - glow configuration for gauge chart bar
• gaugeChartValueLabelFont - font for gauge chart value labels
• gaugeChartUnitLabelFont - font for gauge chart unit label
• gaugeChartTickFont - font for gauge chart tick labels
• gaugeChartTickFillStyle - fill style for gauge chart tick labels
• gaugeChartBarGradient - gauge chart gradients enabled or not
• gaugeChartBarStrokeStyle - stroke style for gauge chart bar
• gaugeChartUnitLabelFillStyle - fill style for gauge chart unit label
• cursor3DGridStrokeStyleX
• cursor3DGridStrokeStyleY
• cursor3DGridStrokeStyleZ
• cursor3DTickStrokeStyleX
• cursor3DTickStrokeStyleY
• cursor3DTickStrokeStyleZ
• cursor3DTickLabelFillStyleX
• cursor3DTickLabelFillStyleY
• cursor3DTickLabelFillStyleZ
• cursor3DTickLabelFontX
• cursor3DTickLabelFontY
• cursor3DTickLabelFontZ
• cursor3DTickLabelBackgroundFillStyleX
• cursor3DTickLabelBackgroundFillStyleY
• cursor3DTickLabelBackgroundFillStyleZ
• cursor3DTickLabelBackgroundStrokeStyleX
• cursor3DTickLabelBackgroundStrokeStyleY
• cursor3DTickLabelBackgroundStrokeStyleZ
• cursor3DTickLabelPaddingX
• cursor3DTickLabelPaddingY
• cursor3DTickLabelPaddingZ

Removed Theme properties:

• gaugeChartEmptyGaugeFillStyle
• gaugeChartEmptyGaugeStrokeStyle
• gaugeChartGaugeFillStyle
• gaugeChartIntervalLabelsFillStyle
• gaugeChartIntervalLabelsFont
• gaugeChartValueLabelFont
• chartMarkerPointMarkerFillStyle
• chartMarkerPointMarkerSize
• chartMarkerPointMarkerShape
• seriesMarkerPointMarkerFillStyle
• seriesMarkerPointMarkerSize
• seriesMarkerPointMarkerShape