Dynamically pass the JSON data in chartjs

Question

I have also created this in codesandbox: https://codesandbox.io/s/bar-graph-9nr8u?file=/src/App.js:2394-3036

I have these JSON data And I have this Pie graph with labels such as car, bikes, motor, trucks. Now, in the graph, I wanted to pass the the total users with the selectedItem of car, bikes, and etc in the datasets of the graph. How can I do this?

JSON:

 const data = [
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: false,
        type1: true,
        selectedItem: "car"
      },
      displayName: "Person1"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "bikes"
      },
      displayName: "Person2"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "car"
      },
      displayName: "Person3"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "motor"
      },
      displayName: "Person4"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "motor"
      },
      displayName: "Person5"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "trucks"
      },
      displayName: "Person6"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "bikes"
      },
      displayName: "Person7"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "truck"
      },
      displayName: "Person8"
    }
  ];

Graph:

<Pie
        data={{
          labels: ar,
          datasets: [
            {
              data: [10, 20, 30, 40, 50],
              backgroundColor: ["red", "yellow", "green", "blue", "pink"],
              borderColor: ["rgba(255, 99, 132, 1)"],
              borderWidth: 1
            }
          ]
        }}
        height={400}
        width={600}
        options={{
          maintainAspectRatio: false,
          title: {
            display: true,
            text: "Selected",
            fontSize: 20
          },
          legend: {
            labels: {
              fontSize: 25
            }
          }
        }}
      />

Answer 1

You can use reduce function to count for each category. working solution

let res = [...data].reduce(
(a, c) => (a[c.items.selectedItem] = (a[c.items.selectedItem] || 0) + 1, a),{});

Use the resulting object in your pie chart as following for labels and data.

labels = Object.keys(res);
data = Object.values(res));

Answer 2

I was a bit confused because you have both 'truck' & 'trucks', maybe thats an error in itself. But for your question, here is a solution:

  const a = data.filter((a) => a.items.selectedItem === "car");
  const b = data.filter((b) => b.items.selectedItem === "bikes");
  const c = data.filter((c) => c.items.selectedItem === "motor");
  const d = data.filter((d) => d.items.selectedItem === "truck");
  const e = data.filter((e) => e.items.selectedItem === "trucks");

And when you insert data into the pie:

<Pie
    data={{
      labels: ar,
      datasets: [
        {
          data: [a.length, b.length, c.length, d.length, e.length],
          backgroundColor: ["red", "yellow", "green", "blue", "pink"],
          borderColor: ["rgba(255, 99, 132, 1)"],
          borderWidth: 1
        }
      ]
    }}
    height={400}
    width={600}
    options={{
      maintainAspectRatio: false,
      title: {
        display: true,
        text: "Selected",
        fontSize: 20
      },
      legend: {
        labels: {
          fontSize: 25
        }
      }
    }}
  />