[Chartjs]-Chart.js Treemap Custom text

by

1👍

✅

The formatter option only got added in version 2 of the treemap chart type, the scriptable option is only available in version 1 so the best way for you to get the extra text is by editing your original data array first and adding the text to it that way like so:

let topTags = [{
  tag: 'android',
  num: 42657
}, {
  tag: 'reactjs',
  num: 38844
}, {
  tag: 'php',
  num: 34381
}, {
  tag: 'sql',
  num: 29996
}, ];

topTags = topTags.map(e => ({
  num: e.num,
  tag: `Lang: ${e.tag}`
}))

const canvas = document.getElementById("chart");
const ctx = canvas.getContext("2d");
const 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
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3"></script>
<canvas id="chart"></canvas>

Leave a comment