create a donut chart for simple percentage - Javascript highcharts

Javascript examples for highcharts:Donut Chart

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

Description

create a donut chart for simple percentage

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>HighCharts Thin Donut</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <style id="compiled-css" type="text/css">

.highcharts-series path {// ww  w . j  a v  a 2 s.co  m
   stroke-width: 0;
}


      </style> 
      <script type="text/javascript">
$(function () {
   var testData = [{name:"77",y:77},{name:" ",y:23,color:"#eee"}];
   var donutChartOptions = {
      chart: {
         backgroundColor: 'rgba(255, 255, 255, 1)' ,
         margin: [0,0,0,0],
         renderTo: 'TestDonut',
         spacing: [0,0,0,0],
         type: 'pie'
      },
        colors: ['#9cdb3b'],
      credits: {
         enabled: false
      },
        exporting: {
         enabled: false
      },
      legend: {
         enabled: false
      },
      plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    color: 'red'
                }
            },
         pie: {
                allowPointSelect: false,
            dataLabels: {
                    connectorWidth: 0,
               enabled: false
            },
            shadow: false,
                states: {
                    hover: {
                        enabled: false
                    }
                },
         },
      },
      tooltip: {
         enabled: false
      },
      series: [{
         data: testData,
         name: "",
         size: 50,
         innerSize: 47,
         pointPadding: 0,
         groupPadding: 0
      }],
      template: 'donut',
        title: {
            align: 'center',
            style: {
                color: '#9cdb3b',
                fontFamily: 'Arial, Helvetica, sans',
                fontSize: '14px',
                fontWeight: 'bold'
            },
            text: testData[0].name + "%",
            verticalAlign: 'middle',
            y: 5
        }
   };
var temp = new Highcharts.Chart(donutChartOptions);
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="TestDonut" style="width: 75px; height: 75px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials