title: Moving point to clicked point in ChartJS (radarchart)
body: <p>Continuing from previous <a href="https://stackoverflow.com/questions/42500107/chartjs-onclick-fill-area-radar-chart">Question</a>.</p>
  
  <p>I'm trying to move the points of a RadarChart to a clicked position. Current method works fine, but if the screen size changes, the the x and y also changes, and the result becomes useless.</p>
  
  <p>My <a href="http://jsfiddle.net/uLUAT/1259/" rel="nofollow noreferrer">JSFiddle</a>.</p>
  
  <p>Click in the chart, and the point will increase or decrease based on x, y values of pointer.</p>
  
  <p>Relevant part of the code:</p>
  
  <pre><code>function getElementPosition(obj) {
      var curleft = 0, curtop = 0;
      if (obj.offsetParent) {
        do {
          curleft += obj.offsetLeft;
          curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
          return { x: curleft, y: curtop };
      }
      return undefined;
    };
  
    function getEventLocation(element,event){
      // Relies on the getElementPosition function.
      var pos = getElementPosition(element);
  
      return {
        x: (event.pageX - pos.x),
        y: (event.pageY - pos.y)
      };
    };
  
    function pointDistance(point1, point2) {
      return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
    };
  
    //Get the context of the Radar Chart canvas element we want to select
    var ctx = document.getElementById("radarChart").getContext("2d");
  
    // Create the Radar Chart
    var myRadarChart = new Chart(ctx).Radar(radarData, radarOptions);
  
    $("#radarChart").click(function (evt) {
      var eventLocation = getEventLocation(this,evt);
      var activePoints = myRadarChart.getPointsAtEvent(evt);
      var eventLocDistToCenter = pointDistance({x: myRadarChart.scale.xCenter, y: myRadarChart.scale.yCenter}, eventLocation);
      var activePointDistToCenter = pointDistance({x: myRadarChart.scale.xCenter, y: myRadarChart.scale.yCenter}, activePoints[0]);
  
      //Check click position and set the point accordingly
      if (eventLocDistToCenter &gt; 320){
          while (activePoints[0].value &lt; 5){
              activePoints[0].value++;
          }
          //alert("click location: " + eventLocDistToCenter + " | point location: " + activePointDistToCenter + " | point value: " + activePoints[0].value); // displays variables (for testing)
      }
      else if (eventLocDistToCenter &gt; 248 &amp;&amp; eventLocDistToCenter &lt; 320) {
          if (activePoints[0].value &lt; 4){
              while (activePoints[0].value &lt; 4){
                  activePoints[0].value++;
              }
          }
          else {
              while (activePoints[0].value &gt; 4){
                  activePoints[0].value--;
              }
          }
      }
      else if (eventLocDistToCenter &gt; 176 &amp;&amp; eventLocDistToCenter &lt; 248) {
          if (activePoints[0].value &lt; 3){
              while (activePoints[0].value &lt; 3){
                  activePoints[0].value++;
              }
          }
          else {
              while (activePoints[0].value &gt; 3){
                  activePoints[0].value--;
              }
          }
      }
      else if (eventLocDistToCenter &gt; 104 &amp;&amp; eventLocDistToCenter &lt; 176) {
          if (activePoints[0].value &lt; 2){
              while (activePoints[0].value &lt; 2){
                  activePoints[0].value++;
              }
          }
          else {
              while (activePoints[0].value &gt; 2){
                  activePoints[0].value--;
              }
          }
      }
      else if (eventLocDistToCenter &gt; 32 &amp;&amp; eventLocDistToCenter &lt; 104) {
          if (activePoints[0].value &lt; 1){
              while (activePoints[0].value &lt; 1){
                  activePoints[0].value++;
              }
          }
          else {
              while (activePoints[0].value &gt; 1){
                  activePoints[0].value--;
              }
          }
      }
      else if (eventLocDistToCenter &gt; 0 &amp;&amp; eventLocDistToCenter &lt; 32) {
  
          while (activePoints[0].value &gt; 0){
              activePoints[0].value--;
          }
  
      }
  
      myRadarChart.update();
  </code></pre>
  
  <p>Is this redeemable or should I find a different approach? My first approach was to only increase/decrease by one value (which worked without any issues). This new approach is more user friendly, but I seem to have hit a roadblock.</p>
  
  <p>Looking for some direction.</p>