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


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?

  • 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

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 which shows how to query the chart based on cursor position.


  • You must 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?


  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.