Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
171
rated 0 times [  172] [ 1]  / answers: 1 / hits: 109831  / 13 Years ago, wed, october 12, 2011, 12:00:00

I need to set different colors for each column in Highcharts graph dynamically. My Highcharts graph is:



options = {
chart: {
renderTo: 'chart',
type: 'column',
width: 450
},
title: {
text: 'A glance overview at your contest’s status'
},
xAxis: {
categories: ['Approved Photos', 'Pending Approval Photos',
'Votes', 'Entrants'],
labels: {
//rotation: -45,
style: {
font: 'normal 9px Verdana, sans-serif, arial'
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Amount'
}
},
legend: {
enabled: false
},
series: []
};
series = {
name: Amount,
data: [],
dataLabels: {
enabled: true,
color: '#000000',
align: 'right',
x: -10,
y: 20,
formatter: function () {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
};


The data is set this way:



for (var i in Data) {
if (parseInt(Data[i]) != 0) {
series.data.push(parseInt(Data[i]));
} else {
series.data.push(null);
}
}
options.series.push(series);
chart = new Highcharts.Chart(options);


How can I dynamically set different colors for each data point in this loop?


More From » highcharts

 Answers
1

When you add the value to the series.data you can also set the color using the point options e.g



series.data.push({ y: parseInt(Data[i]), color: '#FF0000' });


For more details about the point options see https://api.highcharts.com/class-reference/Highcharts.Point#color


[#89665] Monday, October 10, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elliem

Total Points: 415
Total Questions: 117
Total Answers: 94

Location: American Samoa
Member since Fri, Aug 26, 2022
2 Years ago
;