How to set object value in color attribute for high charts legends?

Question

I have to set dynamic text colors based on some condition for legend , In below picture there is some legends like "New" , "Impact Assessment", "Stackholder Review" etc. So all legends had associated with stacks like first 4 associated with X entity and rest associated with Y entity. For X entity I need to change text color in Green and for Y Red Color.

 legend: {
                layout: 'horizontal',
                align: 'left',
                verticalAlign: 'bottom', borderWidth: 0, enabled: true,
                 x: -2, y: 7,
                symbolWidth: 4, symbolHeight: 4,
                itemStyle: {
                    'cursor': 'default',
                    fontSize: '10px', 
                    color: 'Red'
                }
            },
            series: formatChartData(ctrl.TeamData)
        });

             **color : "Defect" ? 'Red' : 'Green'**

Above Statement is fine and giving the correct color of legends but here "Defect" is static value , I need it take from dynamic value?

Problem I am not able to set dynamic value.

Solution

     legend: { 
     labelFormatter: function () {
     var color = this.options.stack == 'Male' ? '#AB1133' : '#02A202';
     return '<span style="color:' + color + '">' + this.name + '</span>';
     }
     }

Above solution also working

Answer 1

As discussed check answer below .

I am using chart events load function to modify legend text color

Highcharts.chart('container', {

  chart: {
    type: 'column',
    events: {
      load: function() {
        var seriesData = this.series;
        for (var i = 0; i < seriesData.length; i++) {
          //checks the stack type
          if (seriesData[i].options.stack == 'male') {
            /*update the legend fonts*/
            this.legend.allItems[i].legendItem.css({
              color: 'red',
              fill: 'red',
            });
          }
          if (seriesData[i].options.stack == 'female') {
            this.legend.allItems[i].legendItem.css({
              color: 'green',
              fill: 'green',
            });
          }
        }
      }
    }
  },

  title: {
    text: 'Total fruit consumtion, grouped by gender'
  },

  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },

  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Number of fruits'
    }
  },

  tooltip: {
    formatter: function() {
      return '<b>' + this.x + '</b><br/>' +
        this.series.name + ': ' + this.y + '<br/>' +
        'Total: ' + this.point.stackTotal;
    }
  },

  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },

  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    stack: 'male',
    //color: 'red'
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    stack: 'male',
    //color: 'red'
  }, {
    name: 'Jane',
    data: [2, 5, 6, 2, 1],
    stack: 'female',
    //color: 'green',
  }, {
    name: 'Janet',
    data: [3, 0, 4, 4, 3],
    stack: 'female',
    //color: 'green'
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

update

Able to disable font color change onmouseover and onmouseout.

onclick functionality if removed, then font color doesn't change and vice-versa

Highcharts.chart('container', {

  chart: {
    type: 'column',
    events: {
      load: function() {
        var seriesData = this.series;
        for (var i = 0; i < seriesData.length; i++) {
          if (seriesData[i].options.stack == 'male') { //checks the stack
            /*update the legend fonts*/
            this.legend.allItems[i].legendItem.css({
              color: 'red',
              fill: 'red',
            });
          }
          if (seriesData[i].options.stack == 'female') {
            this.legend.allItems[i].legendItem.css({
              color: 'green',
              fill: 'green',
            });
          }
        }
      }
    }
  },

  title: {
    text: 'Total fruit consumtion, grouped by gender'
  },

  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },

  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Number of fruits'
    }
  },

  tooltip: {
    formatter: function() {
      return '<b>' + this.x + '</b><br/>' +
        this.series.name + ': ' + this.y + '<br/>' +
        'Total: ' + this.point.stackTotal;
    }
  },

  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },

  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    stack: 'male',
    //color: 'red'
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    stack: 'male',
    //color: 'red'
  }, {
    name: 'Jane',
    data: [2, 5, 6, 2, 1],
    stack: 'female',
    //color: 'green',
  }, {
    name: 'Janet',
    data: [3, 0, 4, 4, 3],
    stack: 'female',
    //color: 'green'
  }]
}, function(chart) {

  $.each(chart.series, function(i, series) {
    /* comment  onclick. for onclick functionality*/
    series.legendGroup.element.onmouseover = null;
    series.legendGroup.element.onmouseout = null;
    series.legendGroup.element.onclick = null;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>