Chartjs Treemap Example


Answer :

Chart.js is great, but has small number of chart types. Chart.js is lib to use provided charts, not to create own chart types.

D3.js is lib for producing data visualizations. See examples. You can find few treemap examples (i.e. this or this) done with d3.js


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/chart.js@2.9.3"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3"></script>  <canvas id="treemap"></canvas>


Comments

Popular posts from this blog

Chemistry - Bond Angles In NH3 And NCl3

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Change The Font Size Of Visual Studio Solution Explorer