title: Getting the closest intersection to a click on Chart.js
body: <p>I'm using chart.js to make a radar chart that the user should be able to interact on their own. The idea is that if the user clicks on the red spot, the app should know whether the green spot is the closest intersection of ticks and angle lines, so that it can change the dataset value at index 1 (corresponding to B) from 2 (corresponding to mid-low) to 4 (mid-high).</p>
  <p><a href="https://i.stack.imgur.com/JwqZd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JwqZd.jpg" alt="Chart" /></a></p>
  <p>And it's set up like this:</p>
  <pre><code>    const chartData = {
      labels: ['A', 'B', 'C', 'D'],
      datasets: [{
          fill: true,
          backgroundColor: 'rgba(6,211,248,0.5)',
          borderColor: 'rgb(6,211,248)',
          data: mockData.presetValues.a,
      }]
  };
  const chartConfig = {
      type: 'radar',
      data: chartData,
      options: {
          elements: {
              line: {
                  borderWidth: 3
              },
  
          },
          scales: {
              r: {
                  min: 0,
                  max: 5,
                  ticks: {
                      stepSize: 1,
                      callback: function (value) {
                          return ['none', 'low', 'mid-low', 'mid', 'mid-high', 'high'][value]
                      }
                  },
                  grid: {
                      circular: true,
                      lineWidth: 5
                  },
                  angleLines: {
                      color: 'black',
  
                  }
  
              }
          },
          plugins: {
              legend: {
                  display: false
              }
          },
          events: ['click']
      }
  };
  const actionChart = new Chart(
      canvas,
      chartConfig
  );
  </code></pre>
  <p>Then I have a listener set up for it like so:</p>
  <pre><code>canvas.addEventListener('click', handleChartClick)
  </code></pre>
  <p>And finally I have a handler like this, which is where my problem is:</p>
  <pre><code>    function handleChartClick(ev) {
      let clickPosition = Chart.helpers.getRelativePosition(ev, actionChart);
      console.log(clickPosition);
      //Find closest tick to click and change values in dataset before refresh
  }
  </code></pre>
  <p>After hours of scouring the documentation and this site, I can not find a way of correlating the position of the click that I receive from the getRelativePosition method with the position of the intersections between the angle lines and the ticks. Once I have those two pieces of information I can modify the dataset and refresh, but I'd greatly appreciate if anyone could help me figure out how to get the closest intersection to the click.</p>