Search code examples
highchartspie-chart

customs sticks in piecharts using highcharts


I am trying to create a piechart using highcharts. And I am facing one problem: The sticks that are denoting the contents are not editable, meaning I am not able to customize it, say giving a different color or make the stick size small/big or thin/thick whatever.

Here is the code. Please help me to resolve.

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },

    series: [{
        data: [29.9, 71.5],
        color: '#000'
    }]
});

enter image description here


Solution

  • You can set colors globally as

    Highcharts.setOptions({
      colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
        '#FF9655', '#FFF263', '#6AF9C4'
      ],
    });
    

    Or you can override global colors in series

     series: [{
        data: [{
            name: 'Firefox',
            y: 44.2,
            color: "#fff"
          },
          ['IE7', 26.6],
          ['IE6', 20],
          ['Chrome', 3.1],
          ['Other', 5.4]
        ]
      }]
    

    Change size of connector

      plotOptions: {
        pie: {
          dataLabels: {
            connectorWidth: 20
          }
        }
      },
    

    fiddle demo