title: Highcharts - Pie chart Color for each slice
body: <p>I have an angular app with highcharts, in the case of the pie chart, I have a list of colors to use on each slice. I restricted the pie to have only 10 slices. I need to put some colors on the slices in order from the biggest slice to the smallest. </p>
  
  <p>Here's the pie chart configuration: </p>
  
  <pre><code>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
       },
      }]
   };
  </code></pre>
  
  <p>The <code>colors</code> array should be in order from the biggest slice to the smallest. The problem is that I also have a line chart that when on hover the line updates the pie chart, so the sizes are dymamically changing. </p>
  
  <p>Here's the data setup for the pie chart: </p>
  
  <pre><code>loadCharts() {
      let presentationResults: OptimizationAllocationGroupByTrps[] | OptimizationAllocationGroupByCost[] = [];
  
      this.xAxis.name = this.selectedOption == null ? "TRP" : this.selectedOption;
  
      if (this.selectedOption === "Budget") {
        presentationResults = [...this.projectResults.OptimizationAllocationGroupByCost];
      } else {
        presentationResults = [...this.projectResults.OptimizationAllocationGroupByTRPs];
      }
  
      this.chartOptions.series[0].name = this.xAxis.name;
      this.chartOptions.series[0].data = [];
      this.chartOptions.series[0].data = [... this.projectResults.Curves.filter(x =&gt; x.Type === this.xAxis.name)[0].Points];
  
      presentationResults.forEach((oa: OptimizationAllocationGroupByTrps | OptimizationAllocationGroupByCost) =&gt; {
        if (oa.name.indexOf("%") === -1) {
          oa.y = (Math.round(oa.y * 100) / 100);
          oa.name = oa.name + ": " + oa.y + "%";
        }
      });
  
      if (presentationResults.length &gt; 10) {
        let accumPercentage: number = 100;
  
  
        presentationResults.sort((v1: any, v2: any) =&gt; v1.y &gt; v2.y ? -1 : 1).length = 9;
  
        presentationResults.forEach(updateResult =&gt; {
          accumPercentage -= updateResult.y;
        });
  
        presentationResults.push({name: "Others: " + Math.round(((accumPercentage))) + "%", y: accumPercentage});
      }
  
  
      this.pieChartOptions.series[0].data = presentationResults;
      this.pieChartOptionsBig.series[0].data = presentationResults;
      console.log(this.pieChartOptions.series[0].data);
  
      this.chartOptions.xAxis.title.text = this.xAxis.name;
      this.chartOptions.title.text = "Reach +1/" + this.xAxis.name;
      this.pieChartOptions.title.text = this.xAxis.name + " by Daypart";
      this.pieChartOptionsBig.title.text = this.xAxis.name + " by Daypart";
  
      this.chartOptions = {... this.chartOptions };
      this.pieChartOptions = {... this.pieChartOptions };
      this.pieChartOptionsBig = {... this.pieChartOptionsBig };
    }
  </code></pre>
  
  <p>And here's an example of the charts: </p>
  
  <p><a href="https://i.stack.imgur.com/JdrH0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JdrH0.png" alt="enter image description here"></a></p>
  
  <p>On this example the orange slice should be <code>"#205493"</code> As is the first item on the colors array.</p>
  
  <p>Any ideas on how to achieve this?</p>