Search code examples
highchartspie-chart

Highcharts Pie dynamic series color


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?


Solution

  • 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