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.
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.
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);