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="charts">
  <div id="chart1" class="chartdiv"></div>  
  <div id="chart2" class="chartdiv"></div>  
</div>

CSS

#charts {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 0 auto;
  font-size: 8px;
}

.chartdiv {
    width       : 400px;
    height      : 400px;
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

/**
 * Plugin: Manipulate z-index of the chart
 */
AmCharts.addInitHandler(function(chart) {
  
  // init holder for nested charts
  if (AmCharts.nestedChartHolder === undefined)
    AmCharts.nestedChartHolder = {};

  if (chart.bringToFront === true) {
    chart.addListener("init", function(event) {
      // chart inited
      var chart = event.chart;
      var div = chart.div;
      var parent = div.parentNode;
      
      // add to holder
      if (AmCharts.nestedChartHolder[parent] === undefined)
        AmCharts.nestedChartHolder[parent] = [];
      AmCharts.nestedChartHolder[parent].push(chart);
      
      // add mouse mouve event
      chart.div.addEventListener('mousemove', function() {
        
        // calculate current radius
        var x = Math.abs(chart.mouseX - (chart.realWidth / 2));
        var y = Math.abs(chart.mouseY - (chart.realHeight / 2));
        var r = Math.sqrt(x*x + y*y);
        
        // check which chart smallest chart still matches this radius
        var smallChart;
        var smallRadius;
        for(var i = 0; i < AmCharts.nestedChartHolder[parent].length; i++) {
          var checkChart = AmCharts.nestedChartHolder[parent][i];
          
          if((checkChart.radiusReal < r) || (smallRadius < checkChart.radiusReal)) {
            checkChart.div.style.zIndex = 1;
          }
          else {
            if (smallChart !== undefined)
              smallChart.div.style.zIndex = 1;
            checkChart.div.style.zIndex = 2;
            smallChart = checkChart;
            smallRadius = checkChart.radiusReal;
          }
          
        }
      }, false);
    });
  }

}, ["pie"]);

/**
 * Create the charts
 */
AmCharts.makeChart("chart1", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
   // "title": "$",
    "value": 100,
    "color": "#090E0F"
  }],
  "startDuration": 0,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 14,
  "titleField": "title",
  "valueField": "value",
  "colorField":...