Show custom tick in X-axis on Hover

问题

I am adding custom ticks and custom labels using below code

axisX3.addCustomTick()
    .setGridStrokeLength(0)
    .setTextFormatter(()=> ttstr[0]+":"+ttstr[1])
    .setValue(xVal);
atleast = 0;
    
spotseries3.setResultTableFormatter((builder, series, xValue, yValue) => {
    return builder
        .addRow('Straddle  - IV')
        .addRow(yValue.toFixed(2))
        .addRow(timdata[xValue.toFixed(0)])
})

Please see above screenshot, I have few questions:

You can see when I mouse hover, its showing 602 in x-axis. How to show custom tick in x-axis while hovering? How to hide 602 on hover?
When hovering on red color line, how to disable showing any label at all and snap to blue line on hover instead of red line?
How to reduce thickness of this divider? Please see below screenshot.

回答1:

1. You can see when I mouse hover , its showing 602 in x-axis ,how to show custom tick in x-axis while hovering , also how to hide 602 on hover.

You can remove the auto cursor tick marker with cursor.disposeTickMarkerX(). This will leave the auto cursor functionality working but will remove the tick marker from X axis.

chart.setAutoCursor(cursor => cursor
    .disposeTickMarkerX()
)

To show your own tick when hovering the series you can add hover event listener to the series. In this listener you can move your custom tick to the correct location. The point parameter of this listener will contain the location on the series where the hover event was fired or the point will be undefined if the series is no longer hovered.

lineSeries.onHover((series, point) => {
    if (point) {
        cTick.setValue(point.location.x)
    }
})

See below a bit more complete example.

const chart = lightningChart().ChartXY({
    defaultAxisXTickStrategy: AxisTickStrategies.DateTime(dateOrigin)
})

chart.setAutoCursor(cursor => cursor
    .disposeTickMarkerX()
)

const lineSeries = chart.addLineSeries({
    dataPattern: DataPatterns.horizontalProgressive
})
    .setStrokeStyle(s => s.setThickness(3))

const cTick = lineSeries.axisX.addCustomTick()
    .setMouseInteractions(false)
    .setValue(0)
    .setGridStrokeLength(0)
    .setTextFormatter(() => 'custom text')

lineSeries.onHover((series, point) => {
    if (point) {
        cTick.setValue(point.location.x)
    }
})

2. When hovering on red color line , how to disable showing any label at all ,, and snap to blue line on hover instead of red line.

You can disable the cursor for the red line with series.setCursorEnabled(false). This will remove the series from consideration for showing the auto cursor.

In this image the cursor has been disabled for the yellow line series. So even though the yellow series is closer to the mouse location, the red line series cursor is shown.

3. How to reduce thickness of this divider , please see below screenshot

The divider is called splitter and you can change the styling of it with dashboard.setSplitterStyle().

To reduce the thickness of it you can follow the code below.

const dashboard = lightningChart().Dashboard({
    numberOfRows: 2,
    numberOfColumns: 1
})

dashboard.setSplitterStyle(splitterStyle => splitterStyle.setThickness(3))

来源：https://stackoverflow.com/questions/62560351/show-custom-tick-in-x-axis-on-hover

标签

javascript

lightningchart