Donut with radial gradient

Using property <strong>gradientRatio</strong> you can achieve any gradient you want. This particular chart uses the following gradient ratio: <strong>[-0.4, -0.4, -0.4, -0.4, -0.4, -0.4, 0, 0.1, 0.2, 0.1, 0, -0.2, -0.5]</strong> Negative value means the color will be darker than the original, and positive number means the color will be lighter. <strong>gradientRatio</strong> array can be of any length you want, depending on a gradient you want to achieve. Pie chart also supports linear gradient. To enable it set <strong>gradientType</strong> to <strong>linear</strong>. However, radial gradients would look much better.

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/themes/light.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" />
<div id="charts">
  <div id="chart1" class="chartdiv"></div>   
  <div id="chart3" class="chartdiv"></div>  
  <div id="chart4" class="chartdiv"></div>  
</div>

CSS

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

.chartdiv {
    width       : 500px;
    height      : 500px;
  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": 50,
    "color": "#090E0F"
  },{
    "title": "#",
    "value": 50,
    "color": "#666"
  }],
  "startDuration": 0,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 14,
 ...