Use pie chart to create ring chart - Javascript highcharts

Javascript examples for highcharts:Pie Chart

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

Description

Use pie chart to create ring chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <style id="compiled-css" type="text/css">

.chart-box {// w  w  w.j a  v  a2s . co  m
   width: 100%;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
$(function() {
  Highcharts.setOptions({
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b> <br>({point.percentage:.1f} %)'
        }
      }
    }
  });
  $.getJSON('https://api.myjson.com/bins/16jm21', function(data) {
    $.each(data, function(key, val) {
        $.each(val.series.data, function(k, v) {
            val.series.data[k].y = parseFloat(val.series.data[k].y);
        });
      var options = {
        chart: {
          renderTo: 'chart-' + key
        },
        title: {
          text: val.name
        },
        series: [{
          name: val.series.name,
          innerSize: '60%',
          data: val.series.data
        }]
      }
      var chart = new Highcharts.Chart(options);
    });
  });
});
    }

      </script> 
   </head> 
   <body> 
      <div id="chart-0" class="chart-box"></div> 
      <div id="chart-1" class="chart-box"></div>  
   </body>
</html>

Related Tutorials