Trying make a bar chart in Angular

Question

I'm trying to create a chart for a dashboard in Angular. I have two collections in Firestore: one called 'mechanicQualifications' and the other 'mecanicos'. In the 'mechanicQualifications' collection, mechanics receive ratings from users. The chart I'm working on is a bar chart that calculates the average rating for each mechanic.

The problem I'm facing is that when I create the chart, it only displays the mechanic IDs instead of their names. I'm attempting to retrieve the names of the mechanics by their IDs from the 'mechanicQualifications' collection, but it's only showing '0' instead of the mechanic names.

How can I fix this issue?

And the code its this:

mechanicRatings: { mechanicId: string, qualification: number }[] = [];
interface MechanicQualification {
  mechanicId: string;
  qualification: number;
}
this.firestore.collection<MechanicQualification>('mechanicQualifications')
.valueChanges()
.subscribe(qualifications => {
  const mechanicRatingsMap: { [mechanicId: string]: number[] } = {};
  qualifications.forEach(qualification => {
    if (!mechanicRatingsMap[qualification.mechanicId]) {
      mechanicRatingsMap[qualification.mechanicId] = [];
    }
    mechanicRatingsMap[qualification.mechanicId].push(qualification.qualification);
  });
  this.mechanicRatings = Object.keys(mechanicRatingsMap).map(mechanicId => {
    const ratings = mechanicRatingsMap[mechanicId];
    const qualification = ratings.reduce((acc, rating) => acc + rating, 0) / ratings.length;
    return { mechanicId, qualification };
  });
});
  this.firestore.collection('mecanicos').get().subscribe(snapshot => {
    const mechanicNames: { [mechanicId: string]: string } = {};
    snapshot.forEach(doc => {
      const mechanicData = doc.data() as { uid: string, name: string };
      mechanicNames[mechanicData.uid] = mechanicData.name;
    });

    const chartData = this.mechanicRatings.map(item => ({
      name: mechanicNames[item.mechanicId],
      y: item.qualification
    }));

    this.createBarChart(chartData);
  });

And this is how I create the chart

createBarChart(chartData: { name: string; y: number }[]) {
  const chartOptions: Highcharts.Options = {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Calificaciones Promedio de Mecánicos'
    },
    xAxis: {
      type: 'category',
      title: {
        text: 'Nombre del Mecánico' 
      }
    },
    yAxis: {
      title: {
        text: 'Calificación Promedio'
      }
    },
    series: [{
      name: 'Calificación Promedio',
      type: 'bar',
      data: chartData
    }]
  };
  Highcharts.chart('rating-container', chartOptions);
}

Answer 1

We can try add categories and labels to xAxis

xAxis: {
 type: 'category',
 title: {
   text: 'Nombre del Mecánico' 
 },
 categories: chartData.map(item => { return item.name });
 labels: {
   enabled: true
 }
}