Hello,
I’ve observed that SciChart JavaScript does not currently support point selection or hit testing for 3D charts. Is there a method or workaround to implement point selection in 3D charts?
It would be helpful to obtain the coordinates of the selected point if such functionality is available.
Thank you for your assistance.
I attempted to use the Custom Modifier to capture point selection in a 3D chart, but I only received the screen coordinates of the mouse click, not the 3D coordinates of the point.
Is there a way to obtain the 3D coordinates of a selected point in Sci Chart JavaScript, or is there an alternative approach that can be used to achieve this?
i have included my attempt at this in the post.
- Shivansh Adhikari asked 2 weeks ago
- You must login to post comments
Hello! To get the Data Value coordinates of a point on a chart you can apply the HitTest API.
Some related pages:
Hit Test API Documentation
Hit Test API UsageExample
In your case, for a 3D chart, you can try creating a custom modifier like this:
Live Example
class CustomModifier extends ChartModifierBase3D {
public onAttach() {
super.onAttach();
if (this.parentSurface) {
// Globally enable hit-test and selection pass (comes with a minor performance hit)
this.parentSurface.isHitTestEnabled = true;
}
}
modifierMouseDown(args: ModifierMouseArgs) {
super.modifierMouseDown(args);
const { x, y } = args.mousePoint;
const seriesInfo = this.parentSurface.renderableSeries
.asArray()
.map((rs) => rs.hitTest(args.mousePoint))
.find((result) => result.isHit);
if (seriesInfo?.isHit) {
const xyzSeriesInfo = seriesInfo as XyzSeriesInfo3D;
if (xyzSeriesInfo.dataSeriesIndex) {
console.log(
`... XYZ Series hit = ${seriesInfo.dataSeriesName ?? "Unknown"}`
);
console.log(`... Index at ${xyzSeriesInfo.dataSeriesIndex}`);
console.log(
`... World coords at ${seriesInfo.hitWorldCoords.toString()}`
);
console.log(
`... Data at ${seriesInfo.xValue}, ${seriesInfo.yValue}, ${seriesInfo.zValue}`
);
}
const heightMapSeriesInfo = seriesInfo as SurfaceMeshSeriesInfo3D;
if (heightMapSeriesInfo.xIndex && heightMapSeriesInfo.zIndex) {
console.log(
`... Mesh Series hit = ${seriesInfo.dataSeriesName ?? "Unknown"}`
);
console.log(
`... X,Z index at ${heightMapSeriesInfo.xIndex}, ${heightMapSeriesInfo.zIndex}`
);
console.log(
`... World coords at ${seriesInfo.hitWorldCoords.toString()}`
);
console.log(
`... Data at ${seriesInfo.xValue}, ${seriesInfo.yValue}, ${seriesInfo.zValue}`
);
}
}
}
}
- Jim Risen answered 1 week ago
- You must login to post comments
Please login first to submit.
