I'm working on an angular app that includes highcharts. Specifically, I am dealing with a pie chart where each slice needs to be colored based on a predefined list of colors. The challenge is that the pie chart is limited to 10 slices, and I need to arrange the colors from largest slice to smallest.
Below is the configuration for the pie chart:
pieChartOptions = {
chart: {
type: "pie"
},
title: {
enabled: true,
text: this.xAxis.name + " by Daypart",
verticalAlign: "top",
align: "left"
},
credits: {
enabled: false
},
xAxis: {
title: {
text: this.xAxis.name
}
},
yAxis: {
title: {
text: "Reach"
}
},
series: [{
data: null,
colors: ["#205493", "#BE5873", "#81CACF", "#E98841", "#E3D830", "#A6C46F",
"#894C7B", "#BA9765", "#7F7F7F", "#C3C3C3"],
dataLabels: {
enabled: false
},
}]
};
The order of colors in the colors array should correspond to the size of the pie slices. However, the challenge arises when the line chart updates the pie chart dynamically, causing the sizes to change.
Here's how the data is set up for the pie chart:
loadCharts() {
// Data setup logic here
}
You can view an example of the charts here. In the example, the first color in the array should correspond to the orange slice.
If you have any suggestions on how to tackle this issue, I'd appreciate your input!