title: change legend color high charts based on data
body: <p>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?</p>
  
  <p>Here is the code I use for the column color:</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/VCjZx/2/" rel="noreferrer">http://jsfiddle.net/VCjZx/2/</a></p>
  
  <pre><code>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 &lt; data.length; i++) {
              if (data[i] &gt;= 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'
          }]
      });
  }
  </code></pre>