title: Change the colors of slices of amCharts pie chart
body: <p>Here is the chart data:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>am4core.ready(function() {
  
  am4core.useTheme(am4themes_animated);
  
  var chart = am4core.create("cards-chart", am4charts.PieChart);
  
  // Add data
  chart.data = [{
    "cardColor": "white",
    "count": 501.9,
    "color": "red"
  }, {
    "cardColor": "red",
    "count": 301.9,
    "color": "red"
  }, {
    "cardColor": "orange",
    "count": 201.1,
    "color": "orange"
  }, {
    "cardColor": "green",
    "count": 165.8,
    "color": "green"
  }, {
    "cardColor": "blue",
    "count": 139.9,
    "color": "blue"
  }];
  
  // Add and configure Series
  var pieSeries = chart.series.push(new am4charts.PieSeries());
  pieSeries.dataFields.value = "count";
  pieSeries.dataFields.category = "cardColor";
  pieSeries.innerRadius = am4core.percent(70);
  pieSeries.ticks.template.disabled = true;
  pieSeries.labels.template.disabled = true;
  
  // This is not working and produces an error
  // pieSeries.slices.template.adapter.add("fill", function (fill, target) {
  //     return target.dataItem.dataContext["color"];
  // });
  
  
  var rgm = new am4core.RadialGradientModifier();
  rgm.brightnesses.push(-0.8, -0.8, -0.5, 0, -0.5);
  pieSeries.slices.template.fillModifier = rgm;
  pieSeries.slices.template.strokeModifier = rgm;
  pieSeries.slices.template.strokeOpacity = 0.4;
  pieSeries.slices.template.strokeWidth = 0;
  
  
  }); // end am4core.ready()</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#cards-chart {
    width: 100%;
    height: 700px;
    position: absolute;
    top: 15%;
    z-index: 13;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.amcharts.com/lib/4/core.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.amcharts.com/lib/4/charts.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.amcharts.com/lib/4/themes/animated.js"&gt;&lt;/script&gt;
  &lt;div id="cards-chart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I used this lines of code to change the color of the slices but it gives me an error:</p>
  <pre><code>pieSeries.slices.template.adapter.add(&quot;fill&quot;, function (fill, target) {
       return target.dataItem.dataContext[&quot;color&quot;];
  });
  </code></pre>
  <p>How can I change the colors correctly?</p>