title: bind first property value of an array of object into chart.js
body: <p>I have an array of object and this is how I assigned values into it.   </p>
  
  <pre><code>  $("#gridview").click(function () {
              $("table tbody th").each(function () {
                  var k = $(this).text().trim();
                  keys.push(k);
              });
              $("table tbody tr").each(function (i, el) {
                  var row = {}
                  $.each(keys, function (k, v) {
                      row[v] = $("td:eq(" + k + ")", el).text().trim();
                  });
                  myData.push(row);
              });
              myData.shift()
              myData.length = 10
  
              console.log(myData);
          });
  </code></pre>
  
  <p>This is how my array of object looks like in inspect element - console</p>
  
  <p><a href="https://i.stack.imgur.com/DneW2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DneW2.png" alt="enter image description here"></a></p>
  
  <p>how can I get the values of <strong>Region</strong> and bind it to the <strong>labels</strong> below:</p>
  
  <pre><code> new Chart(document.getElementById("chart"), {
              type: 'horizontalBar',
              data: {
                  labels: [I want to display all the region here],
                  datasets: [{
                      label: "Android",
                      type: "horizontalBar",
                      stack: "Base",
                      backgroundColor: "#eece01",
                      data: ["I want to display ios user here"],
                  }, {
                      label: "ios",
                      type: "horizontalBar",
                      stack: "Base",
                      backgroundColor: "#87d84d",
                      data: ["I want to display android user here"]
                  }]
              },
              options: {
                  scales: {
                      xAxes: [{
                          //stacked: true,
                          stacked: true,
                          ticks: {
                              beginAtZero: true,
                              maxRotation: 0,
                              minRotation: 0
                          }
                      }],
                      yAxes: [{
                          stacked: true,
                      }]
                  },
              }
          }); 
  </code></pre>
  
  <p><strong>FYI</strong> I have tried <strong>myData[Region]</strong> but its not working</p>
  
  <p>Guys, I have searched the solutions whole day, seems cant found, please help</p>