Highcharts setting the colour of columns in each month period - highcharts

Question

I have one last issue to solve with my chart. I have a variable number of colums for each month of the year. What I am trying to do is to assign each column with a set colour. I have read and tried so many ways without success.
My code.
$(function () {
var colors = ['#999999', '#009900', '#FF6600', '#CC0000', '#FF0000'],
colorIterator = 0;
var chart;
$(document).ready(function() {
$.getJSON("../charts/1-2-4-overall_year_chart.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
marginRight: 130,
marginBottom: 25,
events:{
load:function() {
var chart = this,
series = chart.series,
each = Highcharts.each;
each(series, function(serie, i) {
each(serie.data, function(data, j) {
data.update({
color: colors[colorIterator]
},false);
colorIterator++;
});
});
chart.redraw();
}
}
},
title: {
text: 'Monthly trend',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
endOnTick: false,
max:11,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: 'Count',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
zIndex: 10,
label: {
text: 'Maximum %',
align: 'center',
x: -10,
y: -10,
style: {
color: '#FF0000'
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1
},
plotOptions: {
column: {
colorByPoint: true
},
series: {
cursor: 'pointer',
pointWidth: 6,
point: {
events: {
//click: function() {
//location.href = "feedback-items_detractors_iframe.php?FromDate1=<?php echo $StartDate;?>&ToDate1=<?php echo $EndDate;?> target='iframe2'";
//}
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 255, 255)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
format: '{y:.1f}', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
series: json,
});
});
});
$('#resizer').resizable({
// On resize, set the chart size to that of the
// resizer minus padding. If your chart has a lot of data or other
// content, the redrawing might be slow. In that case, we recommend
// that you use the 'stop' event instead of 'resize'.
resize: function () {
chart.setSize(
this.offsetWidth - 20,
this.offsetHeight - 20,
false
);
}
});
});
This is what I am trying to do
If anyone has any idea how this is done it would be very helpful.
Thank you in advance for your time.

Answer 1

Configure colorByPoint option true and set the color sequence that you want.
options = {
chart: {...},
plotOptions: {
column: {
colorByPoint: true
}
},
colors: [
// set colors
]
}
Example fiddle: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-colorbypoint-true/

Answer 2

just solved the issue by using colors: [ '#333333','#009900','#FF6600','#CC0000','#FF0000' ], plotOptions: { column: { colorByPoint: false },