SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

1
0

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?

Version
2.2.2415
  • Andrew Burnett-Thompson
    Hi Kelly, we’ve seen this and the JS team is going to reply with an answer soon. Best regards, Andrew
  • You must to post comments
0
0

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

  • You must to post comments
0
0

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

Images
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.