CODEWITHSUNDEEP
javascriptgraphchart.jstreemapchart.js2
mewbie
mewbie

Reputation: 63

Chart.js Treemap Custom text

In my code below, I am able to draw a Treemap and also display the tag in each tree cell. But I want to add some custom text next to my tag,

Like say I want the word 'Language' to appear in each tree map cell. I tried the formatter options, But its not working for the version of chart.js I am using. Kindly provide me a solution for the specific version I am using. Since I have multiple other charts defined and changing the version would cause issues.

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

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 }
  }
});

CHART.JS AND TREEMAP VERSION :

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

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

Upvotes: 1

Views: 1072

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31431

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/[email protected]"></script>
<canvas id="chart"></canvas>

Upvotes: 2

Related Questions