Conditional marker colors in tall charts

Question

I use Highcharts, and I want to fill the markers in the line chart with different colors. For example: when the variable "a" is 1, then fill the marker in red and then fill in green. Is it possible to do this?

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

I tried to do this with formatting, but that didn'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" 

and etc.

Answer 2

How to remove logic from a chart and use it only to display data?

 var a = 1, color = a ? 'red' : 'green'; plotOptions: { series: { marker: { fillColor: color, lineWidth: 2, } } } 

Answer 3

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 at jsfiddle.net

Answer 4

Turning to Assad Saiduddin, the answer :

I use dataLabels in a donut pie chart, and the proposed solution was very specific for a singular situation. I wanted to change the colors of the text labels for individual pieces of cake based on conditional logic, comparing the values.

Just share it 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; } } }