showAt() - Displays Crosshair at a specified Value - 0 | JSFiddle Sample Code

showAt() - Displays Crosshair at a specified Value - 0 | JSFiddle Sample Code

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 275px; width: 100%;"></div>
axisX Value for Crosshair: <input id="xValue" type="number" step="any" placeholder="Enter axisX Value for Showing Crosshair" value="20">
<button id="button">Show Crosshair</button>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/methods/crosshair/showat/" target="_blank" title="showAt() - Displays Crosshair at a specified Value ">https://canvasjs.com/docs/charts/methods/crosshair/showat/</a></div>

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Show Crosshair At Specified Value"
    },
    axisX: {
      crosshair: {
        enabled: true
      }
    },
    axisY: {
      crosshair: {
        enabled: true
      }
    },
    data: [{        
        type: "column",
        dataPoints: [
          { x: 10, y: 710 },
          { x: 20, y: 550 },
          { x: 30, y: 500 },
          { x: 40, y: 650 },
          { x: 50, y: 950 },
          { x: 60, y: 680 },
          { x: 70, y: 280 },
          { x: 80, y: 340 },
          { x: 90, y: 140 }
        ]
      }]
  });
  chart.render();
  setInterval(() => {
    const crossHairPositionX = chart.axisX[0]?.crosshair?.value
    const crossHairPositionY = chart.axisY[0]?.crosshair?.value
    chart.render()
    const successX = chart.axisX[0].crosshair?.showAt?.(crossHairPositionX)
    const successY = chart.axisY[0]?.crosshair?.showAt?.(crossHairPositionY)
    console.log('crossHairPositionX', crossHairPositionX, successX, crossHairPositionY, successY)
  }, 1000)
  
}