Menu
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?
272
Go to the Insert tab > Insert Hierarchy Chart > Treemap. You can also use Recommended Charts to create a treemap chart by going to Insert > Recommended Charts > All Charts.
For Chart. js you do this by adding a canvas element, and setting width and height to define the proportions of your graph. Notice that we've added an id ( myChart ) to the canvas element that we can later use to reference our designated graph element in JavaScript or CSS.
Chart. js does not require jQuery. While you can actually pass a jQuery object (and this can be from jQuery v1 or v2) in place of ctx while initializing the chart, you can just as easily pass in the DOM element or the 2D context.
However, as your data visualization and customization needs grow — the more you'll benefit from getting under the hood of ChartJS. We can refer directly to the ChartJS documentation and customize as much as we need.
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.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="treemap"></canvas>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
