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="chartdiv"></div>

CSS

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

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
    "type": "pie",
    "theme": "light",
    "innerRadius": "40%",
    "gradientRatio": [-0.4, -0.4, -0.4, -0.4, -0.4, -0.4, 0, 0.1, 0.2, 0.1, 0, -0.2, -0.5],
    "allLabels": [{
      "text": "50%",
      "align": "center",
      "bold": true,
      "y": "46%",
      "size" : 30
    }],
    "dataProvider": [{
        "country": "Lithuania",
        "litres": 501.9
    }, {
        "country": "Czech Republic",
        "litres": 301.9
    }, {
        "country": "Ireland",
        "litres": 201.1
    }, {
        "country": "Germany",
        "litres": 165.8
    }, {
        "country": "Australia",
        "litres": 139.9
    }, {
        "country": "Austria",
        "litres": 128.3
    }],
    "balloonText": "[[value]]",
    "valueField": "litres",
    "titleField": "country",
    "balloon": {
        "drop": true,
        "adjustBorderColor": false,
        "color": "#FFFFFF",
        "fontSize": 16
    },
    "export": {
        "enabled": true
    }
});
  chart.allLabels[0].text = 100 +"%";
  console.log(chart.allLabels[0].text)
  chart.allLabels[0].text = 70 +"%";