CODEWITHSUNDEEP
highchartsdonut-chart
Carlos Osiel
Carlos Osiel

Reputation: 446

Semi circle donut chart in highchart with data labels in corners

How to create a semi circle donut chart using highchart that provide these result:Result of graph expected

$(function() {
  $('#container').highcharts({
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: 0,
      plotShadow: false
    },
    title: {
      text: '3000',
      align: 'center',
      verticalAlign: 'middle',
      style: {
        fontSize: '50px'
      },
      y: 70
    },
    tooltip: {
      enabled: false
    },
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
          distance: 0
        },
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '75%']
      }
    },
    series: [{
      type: 'pie',
      name: '3000',
      innerSize: '65%',
      data: [{
        y: 3000,
        name: '0',
        color: '#00B8AA',
        dataLabels: {
          x: 1,
          y: 90,
        }
      }, {
        y: 6000,
        name: '6000',
        color: '#E9E9E9',
        dataLabels: {
          x: 0,
          y: 34
        }
      }]
    }]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

I make a example but not show the value in the corners as the next image show: Result of example using highchart

Upvotes: 0

Views: 2616

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

If you need to use pie charts, you can make some simple data formatting to achieve your goal. You can add two slices with y: 0, at the start and at the end of your pie series.

 data: [{
    y: 0,
    name: '0',
    dataLabels: {
      enabled: true,
    }
  }, {
    y: 3000,
    color: '#00B8AA',
  }, {
    y: 3000,
    color: '#ddd',
  }, {
    y: 0,
    name: '6000',
    dataLabels: {
      enabled: true,
    }
  }]

An example how it can work: http://jsfiddle.net/zodc87jx/1/

Another option is to use solidgauge type of chart, it will give you a chance to use only your single value, without adding any 'empty' data to your series.

Here you can see an example how it can work: http://jsfiddle.net/g65vLnyr/

Best regards,

Upvotes: 1

Related Questions