Geek Answers Handbook

Change the color of legends of color diagrams based on data

I can dynamically set the color of a column based on data, but I can’t figure out how to change the color in the legend. Pay attention to jsfiddle, the last bar is green, but the legend is blue. Is there a way to change the color of a column and change the color of a legend?

Here is the code I use for the color of the column:

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' }] }); }
+4
source share
1 answer

Color changes in a series. I solved this by changing your preprocessData strong> function by adding seriesColor = colorUse; . I also added the seriesColor variable to the beginning 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/

+1
source

More articles:


All Articles