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.

I take you want radial gradients. This is currently not possible, but is being implemented. It will be in the next version due to be released within couple of weeks. However, gradients will work on SVG only, meaning IE8 and down will not support it. — martynasma

martynasma martynasma · Accepted Answer · 2015-12-12T12:03:41

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>

AMCharts Donut Chart colour gradient customization

1 Answers