Donut chart

Donut or Doughnut chart is just a simple pie chart with a hole inside. You can define hole radius to any size you need, both in percent or pixels. <h2>Donut chart with patterns</h2> Click on PATTERNS theme above the chart - you will see that our pie or donut chart supports patterns. There are several pre-build patterns in our package or you can easily build your own fancy patterns and use them with our charts.

by HemalathaThanigaivel

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [ {
    "title": "New",
    "value": 9899
  }, {
    "title": "Returning",
    "value": 1500,
    "pullOut": true
  }, {
    "title": "final",
    "value": 4000
  }],
  "titleField": "title",
  "valueField": "value",
  "pulledField" : "pullOut",
  "labelRadius": 5,
  "radius": "35%",
  "innerRadius": "70%",
  "pullOutRadius": 10,
  "pullOutOnlyOne": true,
  "labelsEnabled": false,
  "export": {
    "enabled": true
  },
  "listeners": [{
    "event": "clickSlice",
    "method": function(e) {
      console.log('click')
    }
  }]
} );