JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-chart-treemap.js"></script>
<div style="width:auto;max-width: 100%;height:200px;">
   <canvas id="myChartTree" width="507px" height="200px"></canvas> 
</div>

JavaScript

var mydata = [
{ "Thema": "Thema 1", "Anzahl": 50, "Farbe": "#006aaa" }, 
{ "Thema": "Thema 2", "Anzahl": 10, "Farbe": "#0071ae" }, 
{ "Thema": "Thema 3", "Anzahl": 10, "Farbe": "#0077b1" }, 
{ "Thema": "Thema 4", "Anzahl": 5, "Farbe": "#007cb3" }
];

var lineCtx = document.getElementById("myChartTree");
var myLineChart = new Chart(lineCtx, 
{
    "type": "treemap",
    "options": {
      "responsive": true,
      "plugins": {
        "title": {
        "display": false,
      },
      "legend": {
          "display": false
        }
      }
    },
    "data": {
      "datasets": [{
        "tree": mydata,
        "key": "Anzahl",
        "groups": ["Thema"],
        "borderWidth": 2,
        "borderColor": "white",
        "backgroundColor": "#cccccc",
        "spacing": 0,
        "labels": {
          "display": true,
          "font": { "size": 11 }
        }
      }]
    }
  }

);