I'm plotting multiple bar chart against time in months using Flask + ChartJS. I find that the color of bar labels repeat after 12. I have 17 bars together for every month, and 5 of them have repeating colors.
I'm trying to expand the number of colors using backgroundColor in several ways. It shows different results (colors of all bars for the next months change). I'm unable to expand the colors in multiple bars from 12 to 17 for a single month.
Can I use variable in backgroundColor in some way to solve the problem (in the code below you can see in comment)
The Chart js official documentation also doesn't mention anything regarding expanding colors in multiple bars.
Please suggest something!
function build_stats_dataset() {
var dt = []
for (var i = 0; i < graph_data["labels"].length; i++) {
dt.push(
{
label: graph_datasets["labels"][i], // column name
data: graph_datasets["data_by_month"][i], // data in that column
fill: false,
// backgroundColor: rgba(15 * i, 80 + 10 * i, 160 + 15 * i, 0.1)
}
)
}
return dt;
}
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';