Line series solve nearest from screen does not return appropriate values

Question

I am using LightningChart JS with a line series and I am subscribing to the mousedrag event on the series, this in turn returns the coordinates of the starting point. When I run the solveNearestFromScreen on the point it returns point with the closest y value(As per my observation). I would like to obtain the point which is nearest in distance.

Thanks in advance.

score 1 · Accepted Answer · answered Jul 06 '20 at 06:58

The point returned by the solveNearestFromScreen method depends on the used DataPattern. If you are using DataPatterns.horizontalProgressive, DataPatterns.horizontalRegressive, DataPatterns.verticalProgessive or DataPatterns.verticalRegressive data pattern the point returned by solveNearestFromScreen is based only on single axis value. If the series is using DataPatterns.freeForm (which is default) the returned point will be the closest data point.

HorizontalProgressive pattern solve nearest:

FreeForm pattern solve nearest:

Also there is a solveNearest method on ChartXY that can be used to solve nearest from multiple axes.

When using the solveNearest or solveNearestFromScreen methods, it's important to convert the mouse position to engine coordinate space before solving. This can be done with chart.engine.clientLocation2Engine(event.clientX, event.clientY). That method will convert the given mouse coordinate to a point in the engine coordinates which can then be used to solve the nearest point.

const marker = chart.addChartMarkerXY()
chart.onSeriesBackgroundMouseDrag((obj, ev)=>{
    const m = chart.engine.clientLocation2Engine(ev.clientX,ev.clientY)
    marker.setPosition(chart.solveNearest(m).location)
})

See below for a full code example for moving a marker to a nearest point when mouse is dragged on the series area.

const {
    lightningChart,
    SolidLine,
    SolidFill,
    ColorRGBA,
    AxisTickStrategies,
    UIOrigins,
    DataPatterns
} = lcjs

const chart = lightningChart().ChartXY()

const diesel = [
    { x: 0, y: 1.52 },
    { x: 1, y: 1.52 },
    { x: 2, y: 1.52 },
    { x: 3, y: 1.58 },
    { x: 4, y: 2.00 },
    { x: 5, y: 2.00 },
    { x: 6, y: 2.00 },
    { x: 7, y: 2.00 },
    { x: 8, y: 2.26 },
    { x: 9, y: 1.90 },
    { x: 10, y: 1.90 },
    { x: 11, y: 1.90 },
    { x: 12, y: 1.90 },
    { x: 13, y: 1.60 },
    { x: 14, y: 1.60 },
    { x: 15, y: 1.60 },
    { x: 16, y: 1.00 },
    { x: 17, y: 1.00 },
    { x: 18, y: 1.00 },
    { x: 19, y: 1.74 },
    { x: 20, y: 1.47 },
    { x: 21, y: 1.47 },
    { x: 22, y: 1.47 },
    { x: 23, y: 1.74 },
    { x: 24, y: 1.74 },
    { x: 25, y: 1.74 },
    { x: 27, y: 1.5 },
    { x: 28, y: 1.5 },
    { x: 29, y: 1.5 }
]

const gasoline = [
    { x: 0, y: 1.35 },
    { x: 1, y: 1.35 },
    { x: 2, y: 1.35 },
    { x: 3, y: 1.35 },
    { x: 4, y: 1.90 },
    { x: 5, y: 1.90 },
    { x: 6, y: 1.90 },
    { x: 7, y: 1.92 },
    { x: 8, y: 1.50 },
    { x: 9, y: 1.50 },
    { x: 10, y: 1.3 },
    { x: 11, y: 1.3 },
    { x: 12, y: 1.3 },
    { x: 13, y: 1.3 },
    { x: 14, y: 1.3 },
    { x: 15, y: 1.32 },
    { x: 16, y: 1.40 },
    { x: 17, y: 1.44 },
    { x: 18, y: 1.02 },
    { x: 19, y: 1.02 },
    { x: 20, y: 1.02 },
    { x: 21, y: 1.02 },
    { x: 22, y: 1.02 },
    { x: 23, y: 1.02 },
    { x: 24, y: 1.02 },
    { x: 25, y: 1.02 },
    { x: 27, y: 1.30 },
    { x: 28, y: 1.30 },
    { x: 29, y: 1.30 }
]

const lineSeries = chart.addLineSeries()

const lineSeries2 = chart.addLineSeries()

lineSeries2.add(diesel.map((point) => ({ x: point.x, y: point.y })))
lineSeries.add(gasoline.map((point) => ({ x: point.x, y: point.y })))
chart.getDefaultAxisY()
    .setInterval(0, 3, false, true)
chart.setMouseInteractionRectangleZoom(false)
chart.setMouseInteractionRectangleFit(false)

const marker = chart.addChartMarkerXY()

// Add Chart to LegendBox.
chart.onSeriesBackgroundMouseDrag((obj, ev)=>{
    const m = chart.engine.clientLocation2Engine(ev.clientX,ev.clientY)
    marker.setPosition(chart.solveNearest(m).location)
})

<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>

Line series solve nearest from screen does not return appropriate values

1 Answers1