conditional marker colors in highcharts

Question

I'm using Highcharts and I want to fill markers in line chart with different colors. For example: when variable "a" is 1 then fill marker with red else fill with green. Is it possible to do that?

Here is the code: http://jsfiddle.net/EnyCJ/1/

I was trying to do that with formatter but it doesn't work. Any suggestions?

var a=1;

plotOptions: {
 series: {
  marker: {
   fillColor: {
    formatter: function () {
      if (a == 1) {
       return 'red'
      } else {
       return 'green'
      }
    }
   },
  lineWidth: 2,
  }
 }
},

Answer 1

Try:

fillColor: a==1 ? "#ff0000" : "#00ff00"

etc.

Answer 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

Answer 3

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,
         }
     }
}

Answer 4

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;
           }
        }
    }

Answer 5

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',
          }
        })