JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<!-- Styles -->
<style>
#chartdiv {
  margin:0 auto;
  width: 100%;
  height: 800px;
  overflow:hidden;
}

</style>

<!-- Resources -->
<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>

<!-- Chart code -->
<script>

</script>

<!-- HTML -->
<!-- chart design inspired by Nicolas Rapp: https://nicolasrapp.com/studio/portfolio/cash-hoarders/  -->
<div id="chartdiv"></div>

JavaScript

am4core.ready(function() {

  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

  var chart = am4core.create("chartdiv", am4charts.SankeyDiagram);

  chart.data = [{
      from: "Cash in the U.S.",
      color: "#00aea0"
    },
    {
      from: "Cash Overseas",
      color: "#000000"
    },

    {
      from: "Source",
      to: "Total non financial companies",
      value: 1768,
      color: "#5ea9e1",
      labelText: "[font-size:1.5em]2016 BREAKDOWN OF\nTHE U.S.CORPORATE CASH PILE\n\n[/]NON-FINANCIAL COMPANIES \n [bold]$1,768 Trillion[/b]",
      zIndex: 100
    },

    {
      from: "Total non financial companies",
      to: "Non-tech companies",
      value: 907,
      color: "#5ea9e1",
      labelText: "NON-TECH COMPANIES\n [bold]$907 Billion[/]"
    },
    {
      from: "Total non financial companies",
      to: "Tech companies",
      value: 861,
      color: "#5ea9e1",
      labelText: "TECH COMPANIES\n [bold]861 Billion[/]"
    },

    {
      from: "Non-tech companies",
      to: "Cash in the U.S.",
      value: 324,
      color: "#5ea9e1",
      zIndex: 101
    },
    {
      from: "Non-tech companies",
      to: "Cash Overseas",
      value: 584,
      color: "#5ea9e1"
    },

    {
      from: "Tech companies",
      to: "Rest of tech",
      value: 274,
      color: "#5ea9e1",
      labelText: "REST OF TECH\n[bold]$274 Billion[/]"
    },
    {
      from: "Tech companies",
      to: "Top 5 tech companies",
      value: 587,
      color: "#5ea9e1",
      labelText: "TOP 5 TECH COMPANIES\n[bold]$587 Billion[/]"
    },

    {
      from: "Rest of tech",
      to: "Cash in the U.S.",
      value: 74,
      color: "#5ea9e1",
      zIndex: 100
    },
    {
      from: "Rest of tech",
      to: "Cash Overseas",
      value: 200,
      color: "#5ea9e1"
    },

    {
      from: "Top 5 tech companies",
      to: "Joytechs",
      value: 67,
      color: "#5ea9e1"
    },
    {
      from: "Joytechs",
      to: "Cash in the U.S.",
    ...