title: Display JSON data in react-chartjs-2
body: <p>I have JSON data that gets returned from the backend in the following format:</p>
  <pre><code>[
     0: {
         candidateId: &quot;1&quot;,
         constituencyId: &quot;2&quot;,
         count: 50
     },
     1: {
         candidateId: &quot;2&quot;,
         constituencyId: &quot;2&quot;,
         count: 20
     }
  ]
  </code></pre>
  <p>I want to display the above in a bar chart and have <code>constituencyId</code> as the labels on the x axis, <code>candidateId</code> as the dataset and <code>count</code> as the values.</p>
  <p><code>constituencyId</code> refers to a location and it can have up to 4 persons in this case, so I'm trying to figure out how to display it on the chart.</p>
  <p>This is what I've done so far:</p>
  <pre><code>const generateGraph = (data) =&gt; {
      let conArr = [];
      let canArr = [];
      data.forEach((d) =&gt; {
  
          // get the names of the constituencies that are in data
          // each constituency is a label for the chart
          constituencies.forEach((con) =&gt; {
              if (con.constituencyId === d.constituencyId) {
                  if (!conArr.includes(con.name)) {
                      conArr.push(con.name);
                  }
              }
          });
  
          // get the names of the candidates that are in data
          // each candidate is a dataset object for the chart
          candidates.forEach((can) =&gt; {
              if (can.candidateId === d.candidateId) {
                  canArr.push({
                      label: can.lastName + &quot;, &quot; + can.firstName,
                      data: [d.count], // problem in this line
                  });
              }
          });
      });
  
      const chartData = {
          labels: conArr,
          datasets: canArr,
      };
  
      return chartData;
  };
  </code></pre>
  <p>The issue with the above code is that, the line where I set the data value in the dataset (<code>data: [d.count]</code>), if I add another candidate but from a different constituency, the count is displayed for the first label/constituency.</p>
  <p>What happens:</p>
  <pre><code>labels = [&quot;A&quot;, &quot;B&quot;]
  datasets = [{ label: &quot;Person 1&quot;, data: [1] }, { label: &quot;Person 2&quot;, data: [1] }]
  </code></pre>
  <p>So what should happen is, I should see 1 bar for the first constituency and another bar for the other constituency but what I'm getting is 2 bars for the first constituency and none for the other.</p>
  <p>What should happen:</p>
  <pre><code>labels = [&quot;A&quot;, &quot;B&quot;]
  datasets = [{ label: &quot;Person 1&quot;, data: [1] }, { label: &quot;Person 2&quot;, data: [0,1] }]
  </code></pre>
  <p>Each persons data should correspond to the appropriate label in <code>labels</code></p>
  <p>I do know that the values for the datasets are done based on the index of the labels, but I'm not sure how I would write this.</p>