CODEWITHSUNDEEP
javascripthighchartsmarkers
repincln
repincln

Reputation: 2049

conditional marker colors in highcharts

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

Upvotes: 10

Views: 17410

Answers (5)

AvidDabbler
AvidDabbler

Reputation: 631

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

Upvotes: 1

Spencer Sullivan
Spencer Sullivan

Reputation: 575

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

Upvotes: 1

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26310

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

Upvotes: 3

Asad Saeeduddin
Asad Saeeduddin

Reputation: 46628

Try:

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

etc.

Upvotes: 11

Ivan Nack
Ivan Nack

Reputation: 219

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

Upvotes: 6

Related Questions