I added the cursor modifier as below:
const chartDefinition = {
......,
modifiers: [
{
type: EChart2DModifierType.Cursor,
options: { crosshairStroke: "green", crosshairStrokeThickness: 1}
},
{ type: EChart2DModifierType.MouseWheelZoom },
{ type: EChart2DModifierType.ZoomExtents }
]
};
const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart("scichart-root", chartDefinition);
As I want to show the x, y values of the cursor somewhere outside the chart instead of showing the tooltip. How can I get the x, y values when the cursor moving?
- Kelly Chan asked 2 years ago
- last edited 2 years ago
-
Hi Kelly, we’ve seen this and the JS team is going to reply with an answer soon. Best regards, Andrew
- You must login to post comments
Hi David,
Thanks for you answer. I can see the x1 and y1 values from the cursorModifier.xLineAnnotation and cursorModifier.yLineAnnotaion now.
If I want to keep the crosshair tooltip in the chart, is it possible to show the actual x1 and y1 values in the tooltip? As I can see the values in the tooltip rounded to 1 decimal place. Also, how can I change the font size and padding of the tooltip?
Thanks,
Kelly
- Kelly Chan answered 2 years ago
- You must login to post comments
If you just want to have the cursor tooltip shown outside the grid, create a div to hold it and set its id as the placementDivId on the cursorModifier.
If you want the x and y values of the cursor position programatically, you can inspect the x1 on cursorModifier.xLineAnnotation and y1 on cursorModifier.yLineAnnotaion. You might need a ts-ignore to get at these. Since you’re using the builder api, you can get the cursorModifier instance by doing scichartSurface.chartModifiers.get(0).
Alternatively, check out the demo on the hit-test api https://demo.scichart.com/javascript-chart-hit-test-on-click which shows how to query the chart based on cursor position.
Regards
David
- David Burleigh answered 2 years ago
- You must login to post comments
Please login first to submit.