Chartjs-How I can increase the number of colors for bar labels in ChartJS?

by

0👍

I am generating a random color for each dataSet and it seems to work for me. I don’t get repeating colors.

//function to generate the random number
getRndNumber(min:number , max:number) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}   

//generate a random color in rgba format
color = 'rgba('+ this.getRndNumber(0,255) +', '+ this.getRndNumber(0,255) +', '+ this.getRndNumber(0,255);
//using that color to set the backgroundColor
dataSet.backgroundColor = color +', 0.7)';

Edit:
Yes, I can share the code where I populate the chart(in typescript) but the only thing that matters here is that I use it in a ChartDataSets object I guess.

    populateChart(answerReportList: AnswerReport[]) : ChartDataSets[]
    {      
       var ChartDataSets: ChartDataSets[] = [];
        answerReportList.forEach(report=>{
            var dataSet: ChartDataSets = {};
            dataSet.data = [Math.round((report.resultCases * 100 /report.resultTotal) * 10) / 10];
            dataSet.label = report.answerText;
            var color: string;
            color = 'rgba('+ this.getRndNumber(0,255) +', '+ this.getRndNumber(0,255) +', '+ this.getRndNumber(0,255);
            dataSet.backgroundColor = color +', 0.7)';
            dataSet.hoverBackgroundColor = color +', 1)';
            ChartDataSets.push(dataSet);
        });  

        return ChartDataSets;      
    }

Forgot to mention that ChartDataSets is an interface from chart.js:

import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';

Leave a comment