0

I am trying to have specific color for each slice of my pie. My pie chart shows how many of each priority is stored in the database. I have three priorites:

  • Hight, color red: #cc0000
  • Medium, color yellow: #ff9933
  • Low, color green: #66cc33

I tried to set the color in the dataset "chartDataPriorities", and then apply them at "chart.colorField", but that did not work. I see in the documentation that you can use https://www.amcharts.com/docs/v4/reference/colorset/, but for me it is important that the colors follow the priorites.

My code:

<script>
var chart;
var legend;

var chartDataPriorities = [
    {
    "priority": "Hight",
    "value": 14,
    "color": "#cc0000"
    },
    {
    "priority": "Medium",
    "value": 8,
    "color": "#ff9933"
    },
    {
    "priority": "Low",
    "value": 18,
    "color": "#66cc33"
    }
];
AmCharts.ready(function () {
    // PIE CHART
    chart = new AmCharts.AmPieChart();
    chart.hideCredits = "true";
    chart.dataProvider = chartDataPriorities;
    chart.titleField = "priority";
    chart.valueField = "value";
    chart.colorField = "color";
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 2;
    chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
    chart.startDuration = 0;

    // WRITE
    chart.write("chartdiv_priorities");
});
</script>
<div id="chartdiv_priorities" style="width: 100%; height: 400px;"></div>
Europa
  • 974
  • 12
  • 40
  • Are you asking to convert this to v4 or are you having trouble with v3? Your code, which is using v3, works fine as you can see in [this fiddle](https://jsfiddle.net/n57woteb/). – xorspark Feb 24 '20 at 23:35
  • Ok, so it works, I must have done something else wrong. Case closed. – Europa Feb 25 '20 at 11:17

0 Answers0