JSFiddle - React, Tailwind, and code Playground
by amcharts
HTML
<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/plugins/forceDirected.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<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%;
max-width: 100%;
height: 550px;
}
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/
* ---------------------------------------
*/
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
chart.legend = new am4charts.Legend();
var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())
series.data = [{"name":"IUSA_MPHO","qElemNo":0,"qValue":"NaN","qType":"N","qUp":0,"qDown":0,"children":[{"name":"9months_60+E Rate \r\n<Overall,Overall>1","qElemNo":0,"qValue":"NaN","qType":"N","qUp":0,"qDown":0,"children":[{"name":"9months_60+E Rate \n<Acquisition Risk Score (>= 250 and < 450),Overall>11","qElemNo":6,"qValue":"NaN","qType":"N","qUp":0,"qDown":0,"children":[{"name":"9months_60+E Rate \r\n<Acquisition Risk Score (>= 250 and < 450),Fico Score (<= 680)>12","qElemNo":5,"qValue":"NaN","qType":"N","qUp":0,"qDown":0,"children":[{"name":"9months_30-60E Rate \r\n<Acquisition Risk Score (>= 250 and < 450),Fico Score (<= 680)>12","qElemNo":5,"qValue":"NaN","qType":"N","qUp":0,"qDown":0,"children":[],"qAttrExps":{"qValues":[{"name":"RGB(192,192,192)","qNum":4290822336}]}}],"qAttrExps":{"qValues":[{"name":"RGB(255,0,255)","qNum":4294902015}]}}],"qAttrExps":{"qValues":[{"name":"RGB(0,0,255)","qNum":4278190335}]}}],"qAttrExps":{"qValues":[{"name":"RGB(255,255,0)","qNum":4294967040}]}},{"name":"9months_60+E Rate \r\n<Overall,Overall>2","qElemNo":1,"qValue":"NaN","qType":"N","qUp":0,"qDown":0,"children":[{"name":"9months_60+E Rate \n<MOB (<=6),Overall>21","qElemNo":7,"qValue":"NaN","qType":"N","qUp":0,"qDown":0,"children":[{"name":"9months_60+E Rate \r\n<MOB (<=6),Fico Score...