Can someone assist me with setting chart colors?
I am currently using d3.js in angular to create a half pie chart. I would like to divide it into 3 portions, each represented by a different color. The goal is to assign 3 specific colors to certain ranges.
The data I have is { a: 50, b: 50, c: 50} and the corresponding colors are ['green','yellow','red']. In this scenario, the chart splits evenly and the colors are displayed correctly (starting with green and ending with red). Please refer to the attached image for clarity.
Correct Chart
However, when I input values as { a: 50, b: 30, c: 70}, the colors appear in a different order. It seems that the highest value (70) is being prioritized first as shown below.
Incorrect Chart
Sample Code:
private theData = { a: 50, b: 30, c: 70};
private svg:any;
private svgWidth = 200;
private svgHeight = 125;
private colorRanges:any;
private pie:any;
this.svg = d3
.select('div#pie')
.append('svg')
.attr('width',this.svgWidth)
.attr('height',this.svgHeight)
.attr('id','pie-svg')
.append('g')
.attr('class','ps')
.attr(
'transform',
'translate('+this.svgWidth/2+',115)');
this.colorRanges = d3.scaleOrdinal().range(['green','yellow','red']);
this.pie = d3
.pie()
.startAngle(-90 * (Math.PI / 180))
.endAngle(90* (Math.PI / 180))
.value((d: any) => d[1]);
this.svg.selectAll('rect')
.data(this.pie(Object.entries(this.theData)))
.join('path')
.attr('d',
d3.arc().innerRadius(75).outerRadius(35))
.attr('fill', (d:any) => this.colorRanges(d.data[0]))
.attr('stroke','none')
.style('stroke-width','1px')
.style('opacity',1);