根据数据更改图例颜色高图表

Question

I can dynamically set the color of a column based on data, but can't figure out how to change the color in the legend. Notice on the jsfiddle, the latest bar is green, but the legend is blue. Is there a way that changing the column color also changes the legend color?

Here is the code I use for the column color:

jsfiddle: http://jsfiddle.net/VCjZx/2/

function makeRun() {
var divId = "container";
var current = new Array(99.95,99.96,99.97,99.98);
var goal = new Array(99.965, 99.965,99.965,99.965);
var quarters = new Array("Q1", "Q2", "Q3", "Q4");
    var width = 495; var SizeOfFont = '14px'; var currentName = 'Quarterly %';

    preprocessData = function (data, goal) {
        var nData = [];
        var colorGood = '#348017'; var colorBad = '#E42217'; var colorUse;
        for (var i = 0; i < data.length; i++) {
            if (data[i] >= goal[i]) { colorUse = colorGood; }
            else { colorUse = colorBad; }
            nData.push({
                y: data[i],
                x: i,
                color: colorUse
            });
        }
        return nData;
    };

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: divId,
            height: 275, //little bigger than alotted height to make more readable
            width: width //dependent on #gauges
        },
        title: {
            text: 'Title', //should all be the same, can make a parameter if need to be different
            style: { //size of text above
                fontSize: SizeOfFont
            }
        },
        xAxis: {
            categories: quarters,
            labels: { //size of the Text above^^
                style: {
                    fontSize: '10px'
                }
            }
        },
        yAxis: {
            min: 99.8,
            max: 100,           
            title: {
                text: 'Percent', //parameter since some are days, percents, etc
                style: {//size of y axis title
                    fontSize: SizeOfFont
                }
            },
            labels: {
                style: {//size of the y axis tick labels
                    fontSize: SizeOfFont
                }
            }
        },
        credits: {//gets rid of the highcharts logo in bottom right
            enabled: false
        },
        legend: {//the legend at the bottom
            style: {
                fontSize: '12px'
            }
        },
        series: [ {
            type: 'column',
            name: currentName,
            data: preprocessData(current, goal),
            dataLabels: {
                enabled:true,
                color: 'black',
                formatter: function() {
                        return (Math.round(this.y*Math.pow(10,3))/Math.pow(10,3) + '%'); //rounds to 2 decimals
                    },
                    style: {
                    fontSize: '12px'
                }
            }
        },{
            type: 'spline',
            name: 'Goal',
            data: goal,
            color: '#084482',
            marker: {
                symbol: 'circle'
            },
            dashStyle: 'dash'
        }]
    });
}

Answer 1

The color is changed in the series. I solved this by modifying your preprocessData function by adding seriesColor = colorUse; . I also added the seriesColor variable to the top of your code var seriesColor = '#000'; :

Add this new function to your code:

var seriesColor = '#000';
preprocessData = function (data, goal) {
    var nData = [];
    var colorGood = '#348017'; var colorBad = '#E42217'; var colorUse;
    for (var i = 0; i < data.length; i++) {
        if (data[i] >= goal[i]) { colorUse = colorGood; }
        else { colorUse = colorBad; }
        nData.push({
            y: data[i],
            x: i,
            color: colorUse
        });
    }
    seriesColor = colorUse;
    return nData;
};

Update the series to include the seriesColor variable:

  series: [ {
      type: 'column',
      name: currentName,
      data: preprocessData(current, goal),
      color: seriesColor,
      ...

I updated your fiddle http://jsfiddle.net/VCjZx/5/