How do i modify LightningChart JS point line series to achieve mentioned functionalities?

Question

I wanted to create an XY chart with a simple point line series. For this I started trying out LightningChart JS software from Arction. Few of the questions that I would like to be answered, after creating a point line series with default properties are:

1. How to hide the information box that’s displayed on either of the axes along the cursor lines? We do not want them as we can see the x y information already on cursor box.

2. How to change the color of the content of cursor box?

3. How to change the title of the content of cursor box?

Answer 1

1. You can hide the box over the Axes by disposing the TickMarker for the AutoCursor. This can be done through the Chart's AutoCursor like so:

// Modify the Chart's AutoCursor
chart.setAutoCursor( cursor => cursor
    // Dispose of the information box over the X and Y Axis respectively
    .disposeTickMarkerX()
    .disposeTickMarkerY()
)

2. You can change the style for the content in the cursor box by modifying the Chart's AutoCursor:

// Modify the Chart's AutoCursor
chart.setAutoCursor( cursor => cursor
    // Modify the ResultTable (i.e. cursor box)
    .setResultTable( rt => rt
        // Style the text inside the box
        .setTextFillStyle( fillStyle => fillStyle.setColor(ColorHEX('#996699') )
)

// Alternatively you can have the text inside the cursor box change color
// automatically depending on the hovered Series:

chart.setAutoCursor(cursor => cursor
    // Color the cursor box's text automatically based on hovered Series style.
    .setResultTableAutoTextStyle(true)
)

3. The Cursor Box defaults to using the name of the hovered Series as the title. You can change this by modifying the ResultTable Formatter for the Series:

// Modify the ResultTable Formatter for a Series.
lineSeries.setResultTableFormatter( ( builder, _, xValue, yValue ) => {
    return builder
        .addRow( 'Custom Title' )
        // Adding an empty string between the String and the xValue will align the
        // text nicely inside the box.
        .addRow( 'X Value:', '', xValue.toString() )
        // Alternatively, undefined can be used to align the text in the same manner
        // as with empty string.
        .addRow( 'Y Value:', undefined, yValue.toString() )
} )