Assigning a random color to each object in an array

Question

I am working on setting up a graph with chartjs. The graph works as intended but the issue right now is that either all of the graphs will get the same color, or all of the graphs will change to different random colors each time I add a new company to the graph.

Right now my code is like this:

allInterventionStats = new Map<number, InterventionData[]>();

async onCompanyChange(companies: Company[]) {

    for (const company of companies) {
      if (!this.companyDataCache.get(company.Id)) {
        const interventionStats = await this.adminToolsService.getInterventionUsefulnessData(company.Id).toPromise();
        this.allInterventionStats.set(company.Id, interventionStats);
        this.selectedCompanies.push(company);
      }
    }

    this.selectedCompanies = companies;

    const randomColor = () => Math.floor(Math.random() * 255);
    const colorToUse = `rgb(${randomColor()}, ${randomColor()}, ${randomColor()})`;
    
    for (const [companyId, interventionStats] of this.allInterventionStats) {

      const filteredData: InterventionData[] = interventionStats.filter(x => this.selectedToggleValue === '2' ? x.IsBody : !x.IsBody);

      const dataForGraph = this.calculationMonths.map(month => filteredData.find(x => month.isSame(x.Period)) || null);
    
      if (!dataForGraph) continue;

      const company = companies.find(x => +companyId === x.Id);
      if (!company) {
        continue;
      }

      const datasets: ChartDataset[] = [
        {
          data: dataForGraph.map(x => x !== null ? x.AverageConversationEval : null),
          fill: false,
          borderColor: colorToUse,
          backgroundColor: colorToUse,
          label: company.Name,
          cubicInterpolationMode: 'monotone',
          spanGaps: true,
          segment: {
            borderDash: (ctx) => {
              return ctx.p0.skip || ctx.p1.skip ? [this.dashLength, this.dashSpace] : undefined;
            },
          }
        },
      ];
      this.companyDataCache.set(+companyId, datasets);
    }
    this.setupChart();
  }
 setupChart() {

    if (!this.selectedCompanies.length) {
      const companyItem = this.companies.find(item => item.Id === -1);
      this.selectedCompanies = [companyItem];
    }

    const datasets: ChartDataset[] = flatten(
      this.selectedCompanies.map(dropdownItem => this.companyDataCache.get(dropdownItem.Id) || []));

    const lowerBound = 1;
    const upperBound = 5;

    const chartData: ChartData = {
      labels: this.createChartLabels(),
      datasets
    };

    this.legend = datasets
      .filter((dataset, index) => datasets
        .findIndex(x => x.label === dataset.label && x.backgroundColor === dataset.backgroundColor) === index)
      .map(dataset => ({
        text: dataset.label,
        fillStyle: dataset.backgroundColor as string,
        strokeStyle: dataset.borderColor as string
      }));

Does this answer your question? [Random color generator](https://stackoverflow.com/questions/1484506/random-color-generator) Especially this answer: https://stackoverflow.com/a/7419630/13416247 — some-user, Oct 06 '22 at 11:01

score 0 · Answer 1 · answered Oct 06 '22 at 13:16

To fix the code I added an if condition to check whether the cache already had that company in it. This prevented it from assigning new colors each time since it properly checks if it already does exist.

allInterventionStats = new Map<number, InterventionData[]>();

async onCompanyChange(companies: Company[]) {

if(this.companyDataCache.has(companyId)continue;

Assigning a random color to each object in an array

1 Answers1