JSFiddle - React, Tailwind, and code Playground

by ArsenMelkumiants

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

CSS

container {
  min-width: 300px;
  max-width: 800px;
  margin: 0 auto;
}

JavaScript

$(function() {
   $('#container').highcharts({

    tooltip: {
      formatter: function() {
        return ' Name : <b>' + this.series.data[this.x].name + '</b><br>';
      }
    },
    series: [{
      type: "treemap",
      layoutAlgorithm: "strip",
      allowDrillToNode: true,
      animationLimit: 500,
      dataLabels: {
        enabled: false
      },
      levelIsConstant: false,
      levels: [{
        level: 1,
        dataLabels: {
          enabled: false
        },
        layoutAlgorithm: "strip",
        borderWidth: 3
      }, {
        level: 2,
        dataLabels: {

          enabled: false
        },
        layoutAlgorithm: "strip",
        borderWidth: 3
      }],
      data: [{
        id: 'ABC',
        name: 'fruits',
        value: 100,
        level: 1,
        color: 'Green'
      }, {
        id: 'ROFL',
        name: 'veggies',
        value: 100,
        level: 1,
        color: 'Purple'
      }, {
        id: 'CAB',
        parent: 'ABC',
        name: 'apple',
        value: 100,
        level: 2,
        color: 'red'
      }, {
        id: 'DEC',
        parent: 'ABC',
        name: 'banana',
        value: 100,
        level: 2,
        color: 'Yellow'
      }]
    }],
    title: {
      text: 'Title'
    }
  });
});