title: Determine The Area Of A Point based on Background Color in Chart JS
body: <p>As shown in the pictures below, I have a chart created with 'Chart JS'. This chart contains linear lines with various curves. I painted the areas between these lines with 'background color' in various colors.</p>
  
  <p>My question is, when I create a random point on this chart, I just want to create an if statement based on colors.</p>
  
  <p>For example,
  There is the point called A and the variable called B.
  If A point is in the yellow area, then B is 1.
  If A point is in the light gray area, then B is 2.
  Something like this.</p>
  
  <p>Here is Picture:</p>
  
  <p><a href="https://i.stack.imgur.com/Ufv9H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ufv9H.png" alt=" "></a></p>
  
  <p>Here is sample code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var x_A = new Array(2, 2, 2.5, 2.5, 2);
      var y_A = new Array(2.5 , 3 , 3.5, 2.5 , 2.5);
      var c_A = [];
      for (var i = 0; i &lt; x_A.length; i++) {
          var obj = { x: x_A[i], y: y_A[i] };
          c_A.push(obj);
      }
      var x_B = new Array(0, 1.5, 1.5, 0);
      var y_B = new Array(0, 2, 0.5, 0);
      var c_B = [];
      for (var i = 0; i &lt; x_B.length; i++) {
          var obj = { x: x_B[i], y: y_B[i] };
          c_B.push(obj);
      }
      var x_C = new Array(1.5, 1.5, 2, 2, 1.5);
      var y_C = new Array(0.5, 2, 3, 2.5, 0.5);
      var c_C = [];
      for (var i = 0; i &lt; x_C.length; i++) {
          var obj = { x: x_C[i], y: y_C[i] };
          c_C.push(obj);
      }
      var r_A = 'rgba(220, 20, 60,1)';
      var r_B = 'rgba(255, 255, 56,1)';
      var r_C = 'rgba(34, 139, 34,1)';
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'line',
          data: {
              datasets: [
                  {
                      label: 'X',
                      showLine: true,
                      fill: true,
                      pointRadius: 7,
                      data: [{
                          x: 1,
                          y: 0.9
                      }],
                      borderWidth: 1,
                      pointBackgroundColor: "#000000",
                      lineTension: 0,
                  },
                  {
                      label:'Zone A',
                      showLine: true,
                      fill: true,
                      backgroundColor: r_A,
                      pointRadius: 0,
                      data: c_A,
                      borderWidth: 1,
                      borderColor: "#000000",
                      lineTension: 0,
                  },
                  {
                      label: 'Zone B',
                      showLine: true,
                      fill: true,
                      backgroundColor: r_B,
                      pointRadius: 0,
                      data: c_B,
                      borderWidth: 1,
                      borderColor: "#000000",
                      lineTension: 0,
                  },
                  {
                      label: 'Zone C',
                      showLine: true,
                      fill: true,
                      backgroundColor: r_C,
                      pointRadius: 0,
                      data: c_C,
                      borderWidth: 1,
                      borderColor: "#000000",
                      lineTension: 0,
                  },
              ]
          },
          options: {
              title: {
                  display: false,
              },
              tooltips: {
                  mode: 'nearest',
                  intersect: true
              },
              scales: {
                  xAxes: [{
                      type: 'linear',
                      position: 'bottom',
                      gridLines:
                      {
                          display: false
                      },
                      scaleLabel: {
                          display: true
                      }
                  }],
                  yAxes: [{
                      gridLines:
                      {
                          display: false
                      },
                      scaleLabel: {
                          display: true,
                      }
                  }]
              }
          }
      });
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
  &lt;html&gt;
  &lt;body&gt;
      &lt;div class="w3-row"&gt;
          &lt;div class="w3-col s3"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;
          &lt;div class="w3-col s6" align="center"&gt;&lt;canvas id="myChart" height="220"&gt;&lt;/canvas&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="w3-row" align="center"&gt;&lt;h2&gt;Color Zone where the point X is located: &lt;/h2&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is CodePen:</p>
  
  <p><a href="https://codepen.io/anon/pen/ZNVJvY" rel="nofollow noreferrer">My Sample Example: CodePen</a></p>