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 colors
  chart.normal().fill('#B46FC2');
  chart.hovered().fill('#44008B', 0.8);
  chart.selected().fill('#0A0068', 0.8);
  chart.selected().hatchFill("forward-diagonal", '#282147', 2, 20);
  
  // set the container id for the chart
  chart.container("container");

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

});