I'm looking for a unique color generation implementation using the ngx-charts and d3.js libraries.
More precisely, I need a unique color for each slice of my pie/doughnut chart. This is an important requirement as the chart data is dynamic and we don't know for sure how many pie slices there will be.
Ideally, I would like to have 50 to 100 unique colors belonging to the same color scheme. If we do have more data slices than that amount of colors, we could probably think of repeating colors.
I'm working with Angular, so I would create a Color Manager service that would deal with the color generation for each slice. In my head it would look something like:
export class ColorManagerService {
private colorScale; // d3 color scheme? ideally 50-100 unique colors of a scheme
private usedColors; // set of keys/colors to keep track
getColor(chartKey: string): string {
// generate a color
// check if color is already in use
// if not, return this color
// else, create a new color
}
}
Any suggestions/examples (preferably with d3.js) for this implementation are welcome.