JSFiddle - React, Tailwind, and code Playground

by awanshrestha

HTML

<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-exports.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<div id="container"></div>

CSS

html, body, #container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

anychart.onDocumentReady(function () {

   // create the data
   var dataSet = [
    {name: "Galaxies", children: [
      {name: "Elliptical", children: [
        {name: "IC 1101", value: 4000000},
        {name: "Hercules A", value: 1500000},
        {name: "A2261-BCG", value: 1000000},
        {name: "ESO 306-17", value: 1000000},
        {name: "ESO 444-46", value: 402200}, 
      ]},
      {name: "Spiral", children: [      
        {name: "Rubin's Galaxy", value: 832000},
        {name: "Comet Galaxy", value: 600000},
        {name: "Condor Galaxy", value: 522000},
        {name: "Tadpole Galaxy", value: 280000},
        {name: "Andromeda Galaxy", value: 220000}  
      ]}
    ]}
  ];

  // create a treemap chart and set the data
  var chart = anychart.treeMap(dataSet, "as-tree");
  
  // set the maximum depth of the levels shown
  chart.maxDepth(2);

  // set the chart title
  chart.title("The 10 Largest Galaxies in the Known Universe");

  // set the container id for the chart
  chart.container("container");

  // initiate drawing the chart
  chart.draw();
  
});