semi circle donut chart with text embedded inside - Javascript highcharts

Javascript examples for highcharts:Donut Chart

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

Description

semi circle donut chart with text embedded inside

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://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {//from ww  w. j  a  va  2  s .  c o m
  // Create the chart for Microsoft office
  var chart_completion = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'pie',
      margin: [60, 10, 10, 10]
    },
    colors: ['#fcfcfc', '#F4E998'],
    tooltip: {
      enabled: false,
    },
    plotOptions: {
      pie: {
        slicedOffset: 0,
        size: '50%',
        dataLabels: {
          enabled: false
        }
      },
      series: noBorder
    },
    series: [{
      name: 'Browsers',
      data: [
        ["", 25],
        [, 75]
      ],
      innerSize: '60%',
      showInLegend: false,
      dataLabels: {
        enabled: false
      },
      states: {
        hover: {
          enabled: false
        }
      }
    }]
  }, function(chart) {
    chart.renderer.text('42 K Users', 140, 200)
      .css({
        color: '#9BA0A2',
        fontSize: '2em',
      }).attr({
        zIndex: 5
      })
      .add();
  });
  var noBorder = {
    states: {
      hover: {
        halo: {
          size: 1
        }
      }
    }
  };
});

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

Related Tutorials