get spacing between border and inner background color of a pie chart - Javascript highcharts

Javascript examples for highcharts:Pie Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Pie Chart

Description

get spacing between border and inner background color of a pie chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div> 
      <script type="text/javascript">
var percentage_c = 75;//from   w  w  w .  j ava  2 s.c om
$('#container').highcharts({
  chart: {
    spacingBottom: -8,
    spacingTop: -8,
    spacingLeft: -8,
    spacingRight: -8,
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: true,
    type: 'pie',
    width: null,
    height: null,
    backgroundColor: 'rgba(255, 255, 255, 0)',
  },
  title: {
    text: percentage_c + '%',
    align: 'center',
    verticalAlign: 'middle',
    style: {
      color: '#FFF',
      fontSize: '18px',
      fontFamily: 'arial'
    },
    y: 3,
    x: 20
  },
  credits: {
    enabled: false
  },
  tooltip: {
    enabled: false
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        useHTML: true,
        formatter: function() {},
      },
      states: {
        hover: {
          enabled: false,
          brightness: 0
        }
      }
    },
    pie: {
      borderWidth: 2,
      borderColor: "none"
    }
  },
  series: [{ // series for border
     innerSize: '100%',
     data: [1],
    borderColor: 'red'
  },{
    size: '95%', // decresed size for padding between pie and border
    name: " ",
    colorByPoint: true,
    data: [{
      name: "Unrestricted",
      y: percentage_c,
      color: '#6821A5',
      tooltip: false
    }, {
      name: "Restricted",
      y: 100 - percentage_c,
      color: 'none',
      dataLabels: {
        enabled: false
      }
    }]
  }]
});

      </script>  
   </body>
</html>

Related Tutorials