How can I pass the data into the chartjs label?

Question

I have these graph and data already. I wanted to have the label as this:

However, there's something wrong with my codes as this is what appears if I'll pass the labels dynamically:

Also, how can I pass the number of users with the selectedItem as either car, bikes, motor, or trucks. I only tried with this but then I'll have to type in the exact label to get it right. What I wanted was to also dynamically pass the data inside the datasets in accordance with the label. Any help would be appreciated. Thank you.

const d = data.filter((d) => d.items.selectedItem == "car");

  console.log(d.length);

I have recreated this in codesandbox too: https://codesandbox.io/s/bar-graph-9nr8u?file=/src/App.js

These are my codes:

export default function App() {
  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: "car"
      },
      displayName: "Person8"
    }
  ];

  const d = data.filter((d) => d.items.selectedItem == "car");

  console.log(d.length);

  let ar = [];
  data.map((item) => {
    ar.push(item.items.selectedItem);
  });

  return (
    <div className="App">
      <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
            }
          }
        }}
      />
    </div>
  );
}

Answer 1

You can use Set, its avoid duplicate values:

let ar = new Set();
  data.map((item) => {
    ar.add(item.items.selectedItem);
  });

ar = Array.from(ar); //Convert Set to Array

EDIT: OK, for that I think its better to use:

let ar = {};
  for(let i=0; i<data.length; i++){
    if(ar[data[i].items.selectedItem] === undefined)
      ar[data[i].items.selectedItem] = 1;
    else
      ar[data[i].items.selectedItem]++;
  }

  let data_labels = Object.keys(ar);
  let data_ = Object.keys(ar).map(key => ar[key]);

And replace:

data={{
          labels: data_labels,
          datasets: [
            {
              data: data_,
              backgroundColor: ["red", "yellow", "green", "blue", "pink"],
              borderColor: ["rgba(255, 99, 132, 1)"],
              borderWidth: 1
            }
          ]
        }}

And for the backgroundColor array You need to check the length of ar, and make an array of this size with different colors if you want.