JSFiddle - React, Tailwind, and code Playground

by jlujan

HTML

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<div id="chartdiv" ></div>

CSS

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

JavaScript

am5.ready(function() {

// Create root and chart
var root = am5.Root.new("chartdiv");

root.setThemes([
  am5themes_Animated.new(root)
]);

var chart = root.container.children.push( 
  am5percent.PieChart.new(root, {
    layout: root.verticalLayout
  }) 
);

// Create series
var series = chart.series.push(
  am5percent.PieSeries.new(root, {
    valueField: "percent",
    categoryField: "type",
    fillField: "color",
    alignLabels: false
  })
);

series.slices.template.set("templateField", "sliceSettings");
series.labels.template.set("radius", 30);

// Set up click events
series.slices.template.events.on("click", function(event) {
  console.log(event.target.dataItem.dataContext)
  if (event.target.dataItem.dataContext.id != undefined) {
    selected = event.target.dataItem.dataContext.id;
  } else {
    selected = undefined;
  }
  series.data.setAll(generateChartData());
});

// Define data
var selected;
var types = [{
  type: "DNCE",
  percent: 70,
  color: series.get("colors").getIndex(0),
  subs: [{
    type: "Central",
    percent: 15
  }, {
    type: "Ribeyro",
    percent: 35
  }, {
    type: "ENEI",
    percent: 20
  }]
}, {
  type: "OTIN",
  percent: 30,
  color: series.get("colors").getIndex(1),
  subs: [{
    type: "Central",
    percent: 15
  }, {
    type: "Ribeyro",
    percent: 10
  }, {
    type: "ENEI",
    percent: 5
  }]
}];

alert(types);
series.data.setAll(generateChartData());


function generateChartData() {
  var chartData = [];
  for (var i = 0; i < types.length; i++) {
    if (i == selected) {
      for (var x = 0; x < types[i].subs.length; x++) {
        chartData.push({
          type: types[i].subs[x].type,
          percent: types[i].subs[x].percent,
          color: types[i].color,
          pulled: true,
          sliceSettings: {
            active: true
          }
        });
      }
    } else {
      chartData.push({
        type: types[i].type,
        percent: types[i].percent,
        color: types[i].color,
        id: i
 ...