Updating a sub chart by scrolling another

Hello, as far as I understand, you need to get the current Rollover X Data Value position.
Also, I guess, the only acceptable data values should be those provided in the data series, meaning no arbitrary dates allowed.
Please confirm if I got this correctly.

Then I think this could be implemented using a Custom Modifier with Hit Test API called on mouse move.
https://www.scichart.com/documentation/js/current/webframe.html#CustomChartModifierAPI.html
https://www.scichart.com/example/javascript-chart/javascript-chart-hit-test-on-clickhit-test-api/

Thanks a ton for considering my query, and thank you for the excellent library.

That’s right, only the dates represented by the OHLC candlesticks are required. The date value closest to the mouse-cursor ought to then inform an event listener which would look up a map like structure map<Date, GEXDate> to dynamically generate the horizontal bar chart (GEX vs strike prices).

The best I can do at the moment is select each bar individually via the DataPointSelectionModifier but which falls sort of smoothly scrolling across the OHLC chart to update the GEX chart.

Jim, thanks to your advice I’ve gotten quite close. The following code correctly reports the closest X-data point to my mouse cursor.

“`
class ReportClosestXValueModifier extends ChartModifierBase2D {
public readonly type = EChart2DModifierType.Custom;

constructor() {
super();
}

public modifierMouseMove(args: ModifierMouseArgs): void {
super.modifierMouseMove(args);
const mousePoint = args.mousePoint;
const hitTestRadius = 10 * DpiHelper.PIXEL_RATIO;

// Get the collection of RenderableSeries
const renderableSeriesArray = this.parentSurface.renderableSeries.asArray();
for (const rs of renderableSeriesArray) {
// Perform hit test on the series
const hitTestInfo = rs.hitTestProvider.hitTestDataPoint(mousePoint.x, mousePoint.y, hitTestRadius);
if (hitTestInfo.isHit) {
// Report x-position
const date = Array.from(GEXDataMap.keys())[hitTestInfo.xValue];
console.log(Closest x-position: ${hitTestInfo.xValue});
const d = new Date(date * 1000);
console.log(Closest date: ${d.toLocaleDateString()});
updateGEXData(date); // modify the chart here
// Optionally, break after the first hit
break;
}
}
}
}
“`

The only minor issue that remains is that I have to track my house pretty closely to the candlesticks (since the distance measure is radial, presumably). Would it be possible to get the x-position if I just scrolled exactly horizontally in the canvas of the chart without necessarily getting close to the candlesticks? Thanks for your time.