I'm currently using chart.js in my project and I have to say it's an amazing library. However I recently realised I also need a "treemap" which I was unable to find on their website. Has anyone managed to implement a treemap example using chart.js?

I'm currently using chart.js in my project and I have to say it's an amazing library. However I recently realised I also need a "treemap" which I was unable to find on their website. Has anyone managed to implement a treemap example using chart.js?

• javascript
• graph
• charts
• chart.js
• react-chartjs

1 Answer 1

This snippet is an example of the treemap module for chart.js.
Also here are more examples and the documentation.

var topTags = [
  {tag:'python',num:133269},{tag:'javascript',num:109742},{tag:'java',num:65490},{tag:'c#',num:45445},{tag:'html',num:43767},{tag:'android',num:42657},{tag:'reactjs',num:38844},{tag:'php',num:34381},{tag:'sql',num:29996},{tag:'python',num:29942},{tag:'css',num:29654},{tag:'r',num:28319},{tag:'c++',num:27389},{tag:'node.js',num:25415},{tag:'angular',num:24093},{tag:'pandas',num:23826},{tag:'arrays',num:23075},{tag:'jquery',num:18968},{tag:'mysql',num:18863},{tag:'swift',num:17971},{tag:'ios',num:17600},{tag:'json',num:15589},{tag:'laravel',num:15537},{tag:'flutter',num:15201},{tag:'c',num:15195},{tag:'django',num:14748},{tag:'sql',num:12752},{tag:'reactjs',num:10974},{tag:'excel',num:10962},{tag:'list',num:10726},{tag:'regex',num:10676}
];

var canvas = document.getElementById("treemap");
var ctx = canvas.getContext("2d");
var chart = window.chart = new Chart(ctx, {
  type: "treemap",
  data: {
    datasets: [{
      tree: topTags,
      key: "num",
      groups: ['tag'],
      spacing: 0.5,
      borderWidth: 1.5,
      fontColor: "black",
      borderColor: "grey"
    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: { display: false },
    tooltips: { enabled: false }
  }
});

body { margin: 0; overflow: hidden; }
canvas { width: 100vw; height: 100vh; }

<script src="https://cdn.jsdelivr/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]"></script>

<canvas id="treemap"></canvas>