I have code where is everythig work but only with chart type 'column'.
like this http://jsfiddle.net/Blooder/02bncux6
<div id="first">
</div>
<button id="but">Change to red</button>
$(document).ready(function(){
loadBarChart();
$("#but").on("click",function() {
var series = chart.highcharts().series[2];
series.update({
color: 'red'
});
});
});
function loadBarChart(){
chart = $('<div class="widget barchart"></div>');
$("#first").append(chart);
chart.highcharts({
chart: {
type: 'column'
},
title: {
text: ""
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
categories: ['33%', '66%', '100%']
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
}
But when you try change this type to chart Pie so this is not work. How can I fix this please?
The pie chart type has only one series, so to change color you have to use update
method on a point:
$("#but").on("click", function() {
var point = chart.series[0].points[1];
point.update({
color: 'red'
});
});
Live demo: https://jsfiddle.net/BlackLabel/tLk65vf8/
Docs: https://www.highcharts.com/docs/chart-and-series-types/pie-chart