Pie chart slice radius using HighCharts library

Question

Hi EveryOne I am using HighCharts library to plot charts , i want to achieve below pie chart i couldn't find proper example please help me on this.

Answer 1

You can enable sliced state for the blue point and use properties related with border:

    series: [{
        showInLegend: true,
        allowPointSelect: true,
        type: 'pie',
        data: [{
            y: 45,
            color: 'black',
            dataLabels: {
                enabled: false
            }
        }, {
            y: 55,
            color: 'blue',
            sliced: true,
            borderWidth: 5,
            borderColor: 'white',
            dataLabels: {
                format: '{point.y}%',
                distance: -60,
                style: {
                    fontSize: 24
                }
            }
        }]
    }]

---

Live demo: http://jsfiddle.net/BlackLabel/gnqsuefw/

API Reference: https://api.highcharts.com/highcharts/series.pie.data.sliced

Answer 2

I created the extract pie for you here: https://jsfiddle.net/markwan/qm8xzr93/3/

// Build the chart
Highcharts.chart('container', {
chart: {
    plotBackgroundColor: "#f5f5f5",
    backgroundColor: '#f5f5f5',
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
},
title: {
    text: ''
},
tooltip: {
    enabled: false
},
accessibility: {
    point: {
        valueSuffix: '%'
    }
},
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',            
        showInLegend: true, 
    }
},
legend: {
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'top',
  itemMarginBottom: 15,      
  x: 0,
  y: 150
},
series: [{
    name: 'Members',
    colorByPoint: true,
    data: [
    
         {
        name: 'Total Members: 1.000.000',
        y: 450000,
        color: "#393f4e",
        borderWidth: 1,
        borderColor: '#f5f5f5',
        dataLabels: {
            enabled: false,
                        
        }
    },
    {
        name: 'Targeted Members: 550.000',
        y: 550000,
        sliced: true,
        borderWidth: 15,
       
        borderColor: 'white',
        color: "#34b9d5",
        dataLabels: {
            enabled: true,
            format: '<b>{point.percentage:.0f}%</b>',
            distance: -70, 
            style: {
                fontSize: 30
            }
        }
       
    }]
}]
});