[Solved]-conditional marker colors in highcharts-Highcharts

I was working on something like this and I thought I would update this post with a 2021 response. Turns out with Highcharts you have to feed in an array into data, but it can be an array of objects that have parameters associated with the point. I was attempting to make the point fill to be on a different scale than the y axis see below:

tempScale(value: any) {
      if(value > 32) {
        return 'red'
      }
      else if(value > 31) {
        return 'orange'
      }
      else if(value > 30) {
        return 'yellow'
      }
      else if(value > 28) {
        return 'green'
      }
      else if(value > 27) {
        return 'blue'
      }
      else {
        return '#99ffff'
      }
  }

I ended up finding this codepen where is shows an example on how you can feed in an array of objects and use the keys y, color, marker, and radius to feed attributes to each item in the array.

   {
      y: 9,
      color: 'green',
      marker: {
        radius: 10
      }
    }

I ended up combining the 2 and calculating out the color for each of them before they were pushed into the array and it worked great for my purposes.

array.push({
          y: item.attributes.Sal, 
          color: this.tempScale(item.attributes.Temp), 
          marker: {
            lineWidth: 1,
            lineColor: 'black',
          }
        })

Expanding upon Asad Saeeduddin's answer:

I am using dataLabels in a doughnut pie chart and the proposed solution was very specific to a singular situation. I wanted to change the label text colors for individual pie slices, based on conditional logic, comparing values.

Just sharing because my search brought me here.

data: outerData,
dataLabels: {
    formatter:
        function () {
            if ((outerData[this.point.x].y > innerData[this.point.x].y) && (this.point.x != 0)) {
                return this.y > 0.1 ? '<span style="fill: red;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
            } else {
                return this.y > 0.1 ? '<span style="fill: #006400;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
           }
        }
    }

How about removing the logic from your chart and use it only to display data?

var a = 1,
    color = a ? 'red' : 'green';

plotOptions: {
     series: {
         marker: {
             fillColor: color,
             lineWidth: 2,
         }
     }
}

You also use zones:

$(function () {
    $('#container').highcharts({
        series: [{
            data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
            zones: [
              {
                value: 0,
                color: '#f7a35c'
              }, 
              {
                color: '#90ed7d'
              }
            ]
        }]
    });
});

Try it in jsfiddle.net