javascript - 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. 您可以通过为 AutoCursor 设置 TickMarker 来隐藏 Axes 上的框。这可以通过图表的 AutoCursor 来完成，如下所示：

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

2. 您可以通过修改 Chart 的 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. 光标框默认使用悬停系列的名称作为标题。您可以通过修改 Series 的 ResultTable Formatter 来更改此设置：

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