#55861716: amCharts v4 Colorizing nest donuts

Nested donut chart (also known as Multi-level doughnut chart, Multi-series doughnut chart) allows you to display multiple series in a single visualization. The series are usually related but represent different categories or slices of data (like the distribution of some category values over different years, etc.) <h2>Support for multiple series</h2> You can add any number of pie series to the pie chart. The chart will automatically nest them dividing available radius between each series, creating nested donuts. [amb href="https://www.amcharts.com/docs/v4/chart-types/pie-chart/#Nested_donut_charts"]More about nested donut charts[/amb]

by notacouch

HTML

<!--
fork of:
https://jsfiddle.net/aliz/gwz7om9e/
-->

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="legend"></div>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}



#legend {
  width: 300px;
  height: 200px;
  border: 1px solid #eee;
  margin-left: 10px;
  float: left;
}

#legend .legend-item {
  margin: 10px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

#legend .legend-item .legend-value {
  font-size: 12px;
  font-weight: normal;
  margin-left: 22px;
}

#legend .legend-item .legend-marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #ccc;
  margin-right: 10px;
}

#legend .legend-item.disabled .legend-marker {
  opacity: 0.5;
  background: #ddd;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */
 
 // https://www.amcharts.com/docs/v4/reference/piechart/
 
 // IIFE to avoid namespaces problems
(function(){
	/*
  	Define all colors used.
  */
	var colorSet = new am4core.ColorSet();
	colorSet.list = ["#18dc08", "#e2ed0c", "#3be791", "#0eade6", "#8f55e9", "#dd0a4b"].map(function(color) {
	    return new am4core.color(color);
  });
  
  var size = 16.6;
  
  /*
  	Creates a pie slice
  */
  function createPie(chart, targetAttribute, positionRadiusInPie){
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "size"; // the percentage size so all slice are equals
    pieSeries.dataFields.category = "name";
    pieSeries.slices.template.strokeWidth = 1;
    pieSeries.slices.template.strokeOpacity = 1;
    pieSeries.alignLabels = false;
    pieSeries.ticks.template.disabled = true;
    // Enable label
    pieSeries.labels.template.text = "{"+ targetAttribute +".length}";
    pieSeries.labels.template.radius = am4core.percent(positionRadiusInPie); // magic number
    // color
    // var brighterColors = new am4core.ColorSet();
    // brighterColors.list = colorSet.list.map(function(color) {
    //   return color.brighten(chart.series.length);
    // });
    // pieSeries.colors = brighterColors;
    if (chart.series.length === 3) {
    	var distinctColors = new am4core.ColorSet();
      distinctColors.list = colorSet.list.map(function(color, index) {
        if (index === 1) {
          return am4core.color("gray");
        }
        return color;
      });
      pieSeries.colors = distinctColors;
    } else {
      pieSeries.colors = colorSet;
    }
    pieSeries.labels.template.fill = am4core.color("white");
   ...