In Tree Map chart Show values below points name - Javascript highcharts

Javascript examples for highcharts:Treemap Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Treemap Chart

Description

In Tree Map chart Show values below points name

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Treemap Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {//  ww w  . ja v a 2  s  .  c o  m
   min-width: 300px;
   max-width: 600px;
   margin: 0 auto;
}


      </style> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/heatmap.js"></script> 
      <script src="https://code.highcharts.com/modules/treemap.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/world-mortality.json', function(data) {
  var points = [],
    regionP,
    regionVal,
    regionI = 0,
    countryP,
    countryI,
    causeP,
    causeI,
    region,
    country,
    cause,
    causeName = {
      'test': 'Communicable diseases',
      'Noncommunicable diseases': 'Non-communicable diseases',
      'Injuries': 'Injuries'
    };
  for (region in data) {
    if (data.hasOwnProperty(region)) {
      regionVal = 0;
      regionP = {
        id: 'id_' + regionI,
        name: region,
        color: Highcharts.getOptions().colors[regionI]
      };
      countryI = 0;
      for (country in data[region]) {
        if (data[region].hasOwnProperty(country)) {
          countryP = {
            id: regionP.id + '_' + countryI,
            name: country,
            parent: regionP.id
          };
          points.push(countryP);
          causeI = 0;
          for (cause in data[region][country]) {
            if (data[region][country].hasOwnProperty(cause)) {
              causeP = {
                id: countryP.id + '_' + causeI,
                name: causeName[cause],
                parent: countryP.id,
                value: Math.round(+data[region][country][cause])
              };
              regionVal += causeP.value;
              points.push(causeP);
              causeI = causeI + 1;
            }
          }
          countryI = countryI + 1;
        }
      }
      regionP.value = Math.round(regionVal / countryI);
      points.push(regionP);
      regionI = regionI + 1;
    }
  }
  Highcharts.chart('container', {
    series: [{
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      allowDrillToNode: true,
      animationLimit: 1000,
      dataLabels: {
        enabled: false
      },
      levelIsConstant: false,
      levels: [{
        level: 1,
        dataLabels: {
          enabled: true,
          format: '{point.name}<br/>{point.value}'
        },
        borderWidth: 3
      }],
      data: points
    }],
    subtitle: {
      text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
    },
    title: {
      text: 'Global Mortality Rate 2012, per 100 000 population'
    }
  });
});

      </script>  
   </body>
</html>

Related Tutorials