AMCharts Donut Chart colour gradient customization

Question

Is it possible to add a color gradient to the AMCharts Donut Graph??? I have a Donut graph, which is like a progress bar, shows the completed status. The AMCharts allows me to choose only two colors for Percentage completed and not completed. I want the Completed part of the chart to be filled with a colour gradient. It can be done in the bar graph, but I couldn't figure a way to work on donut chart. Any help would be appreciated. Thanks.

Answer 1

Starting from version 3.18, amCharts support radial gradients on pie/donut charts.

To enable it, use gradientRatio property. It's an array of values. Zero means no change, negative value - make the color darker, positive - lighter.

So for example this line:

"gradientRatio": [0, 0, 0 ,-0.2, -0.4]

Would mean that gradient will have 5 steps. The first 3 steps will be in slice's original color. 4th will make it 20% darker. 5th - 40% darker.

Here's a complete working example:

 var chart = AmCharts.makeChart("chartdiv", { "type": "pie", "dataProvider": [{ "country": "United States", "visits": 7252 }, { "country": "China", "visits": 3882 }, { "country": "Japan", "visits": 1809 }, { "country": "Germany", "visits": 1322 }, { "country": "United Kingdom", "visits": 1122 }, { "country": "France", "visits": 414 }, { "country": "India", "visits": 384 }, { "country": "Spain", "visits": 211 }], "valueField": "visits", "titleField": "country", "startEffect": "elastic", "startDuration": 2, "innerRadius": "40%", "gradientRatio": [0, 0, 0 ,-0.2, -0.4], "gradientType": "radial" }); 

 <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> <script src="http://www.amcharts.com/lib/3/pie.js"></script> <div id="chartdiv" style="width: 100%; height: 435px;"></div>