Overlapped line chart show wrong color order when hover

Lightweight Charts Version: 3.4.0

Steps/code to reproduce:

var series = chart.addLineSeries({
  color: "green",
  lineWidth: 2
});

series.setData(data);

var series2 = chart.addLineSeries({
  color: "red",
  lineWidth: 2
});

series2.setData(data);

Actual behavior:

The crosshair when hover show as red but the line show in the chart is green.

Expected behavior:

The crosshair when hover should be in green since the green line is above the red line

Screenshots:

CodeSandbox/JSFiddle/etc link:

https://codesandbox.io/s/hardcore-frost-3pxjn?file=/src/index.js

[timocov]

@thanhlmm Sure.

I’d start from the following places:

• zOrder getter & setter of DataSource - zOrder basically defines the order of data source through all other data sources
• orderedSources which sorts sources in model
• CrosshairMarksPaneView pane view which is used to create renderers for small dots for every line-like series to draw them a top of all series
• PaneWidget._drawSources method which is used to draw all sources.

Probably there is some differences between the order of sources for crosshair and for pane.

[thanhlmm]

The crosshair when hover should be in green since the green line is above the red line

I think the opposite - the line should be red instead of green since the red line was created after the green one, so this looks like a bug I think.

Yeah whatever order but I think I should show the same like what the line is displayed, If it is green, the crosshair should show green