I have to change the color of one of the columns in highcharts. I see what we can change it for the entire series but haven't been able to figure out changing it for only 1 column. This is how the my series is made:
var dates = [];
var scores = [];
vm.data.values.forEach(function (item) {
dates.push(datefilter(item.date, 'yyyy-MM'));
if (item.isCurrent) {
scores.push({
y: item.score || 0,
marker: {
fillColor: '#FF0000',
lineWidth: 5,
lineColor: "#FF0000"
}
});
}
else {
scores.push(item.score || 0);
}
});
vm.chartConfig = {
options: {
chart: {
type: 'column'
},
plotOptions: {
series: {
cursor: 'pointer'
},
marker: {
lineWidth: 1,
symbol: 'circle'
}
}
}
},
title: {
text: "Scores"
},
xAxis: {
categories: dates
},
yAxis: {
title: {
text: null
}
},
series: [
{
name: 'Scores',
data: scores,
color: "#249858"
}
]
};
};
The html of the component looks like below:
<highchart config="vm.chartConfig"></highchart>
With this code, I have only been able to see only 1 color that I got set in the chartConfig object. The one that I set while creating my series data in the foreach loop never takes effect. Any pointers or plunkr link would be really great.
For anyone having similar problems, the color I was setting was in wrong places. Changing
OLD
with NEW CODE
did the trick for me.
NOTE: The marker color I am keeping is because I am rendering line and column charts. And color works for column while marker works for line chart.