title: semi circle donut chart highchart with text embedded inside
body: <p>I am using Highcharts js and I am trying to draw a pie chart with highCharts
  which is a semicircle and some text embedded inside it.</p>
  
  <p><img src="https://i.stack.imgur.com/tTByM.png" alt="This is what I want to draw"></p>
  
  <p>and 
  Till now what I have made is </p>
  
  <p><img src="https://i.stack.imgur.com/WoeBP.png" alt="This is output I&#39;m Getting"></p>
  
  <p>my html markup is </p>
  
  <pre><code>    &lt;div class="row"&gt;
          &lt;div class="col-md-4 col-sm-4 col-xs-4"&gt;
              &lt;div id="trends-pie-chart-1" class="trends-pie-chart"&gt;
                              &lt;!-- draw pie chart here --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 col-sm-4 col-xs-4"&gt;
              &lt;div id="trends-pie-chart-2" class="trends-pie-chart"&gt;
                  &lt;!-- draw pie chart here --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 col-sm-4 col-xs-4"&gt;
              &lt;div id="trends-pie-chart-3" class="trends-pie-chart"&gt;
                      &lt;!-- draw pie chart here --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>css used</p>
  
  <pre><code>.trends-pie-chart {
  width: 100%;
  margin-bottom: 30px;
  }
  </code></pre>
  
  <p>and Js used</p>
  
  <pre><code> // Create the chart for Microsoft office
   var chart_completion = new Highcharts.Chart({
      chart: {
      renderTo: 'trends-pie-chart-1',
      type: 'pie',
      margin: [60,10,10,10]
  },
  colors: ['#fcfcfc', '#F4E998'] ,
  tooltip: {
      enabled: false,
  },
  plotOptions: {
      pie: {
          slicedOffset: 0,
          size: '50%',
          dataLabels: {
              enabled: false
          }
      },
      series: noBorder
  }, 
  title: {
      text: 'Microsoft Office',
      align: 'center',
      verticalAlign: 'bottom',
      y : 10,
      style: {
          fontSize: '2em'
      }
  },  
  credits: {
      enabled: false
  },
  series: [{
      name: 'Browsers',
      data: [["",25],[,75]],
      innerSize: '60%',
      showInLegend:false,
      dataLabels: {
          enabled: false
      },
      states:{
          hover: {
              enabled: false
          }
      }
  }]
  },function (chart) { // on complete
  chart.renderer.text('42 K Users', 140, 200)
  .css({
      color: '#9BA0A2',
      fontSize: '2em',
    zIndex:100000
  })
  .add();
  
  });
      // Create the chart for azure
      var chart_time = new Highcharts.Chart({
          chart: {
              renderTo: 'trends-pie-chart-2',
              type: 'pie',
              margin: [60,10,10,10]
          },
          colors: ['#fcfcfc', '#3EC1F9'] ,
  
          plotOptions: {
              pie: {
                  slicedOffset: 0,
                  size: '50%',
                  dataLabels: {
                      enabled: false
                  }
              },
              series : noBorder
          },
          tooltip: {
              enabled: false,
          },
          title: {
              text: 'Azure',
              align: 'center',
              verticalAlign: 'bottom',
              y : 10,
              style: {
                  fontSize: '2em'
              }
  
          },
          credits: {
              enabled: false
          },
          series: [{
              name: 'Browsers',
              data: [["",25],[,75]],
              innerSize: '60%',
              showInLegend:false,
              dataLabels: {
                  enabled: false
              },
              states:{
                  hover: {
                      enabled: false
                  }
              }
          }]
      });
      // Create the chart for Cloud Storage
      var chart_budget = new Highcharts.Chart({
          chart: {
              renderTo: 'trends-pie-chart-3',
              type: 'pie',
              margin: [60,10,10,10]
          },
          colors: ['#fcfcfc', '#6355FC'] ,
          plotOptions: {
              pie: {
                  slicedOffset: 0,
                  size: '50%',
                  dataLabels: {
                      enabled: false
                  }
              },
              series: noBorder
          },
          title: {
              text: 'Cloud Storage',
              align: 'center',
              verticalAlign: 'bottom',
              y : 10,
              style: {
                  fontSize: '2em'
              } 
          },
          tooltip: {
              enabled: false,
              animation: false,
              backgroundColor: null
          },
  
          credits: {
              enabled: false
          },
          series: [{
              name: 'Browsers',
              data: [["",25],[,75]],
              innerSize: '60%',
              showInLegend:false,
              dataLabels: {
                  enabled: false
              },
              states:{
                  hover: {
                      enabled: false
                  }
              }
          }]
      });
      /*pie charts trends page*/
     var noBorder = { 
      states:{
          hover:{
              halo: {
              size: 1
              }     
         }
        }
    };
  </code></pre>