Tree map chart rectangles - Javascript highcharts

Javascript examples for highcharts:Treemap Chart

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

Description

Tree map chart rectangles

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Treemap Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script> 
      <style id="compiled-css" type="text/css">

#container {//  ww  w.j  av  a2 s .  c  o  m
   min-width: 300px;
   max-width: 600px;
   margin: 0 auto;
}


      </style> 
      <script type="text/javascript">
$(function() {
  Highcharts.chart('container', {
    title: {
      text: 'All Data Sources',
      margin: 1,
      style: {
        font: 'Roboto Condensed,sans-serif',
        fontSize: '24px',
        fontFamily: 'Roboto Condensed',
        fontWeight: 700,
        display: 'block',
      }
    },
    series: [{
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      allowDrillToNode: true,
      animationLimit: 1000,
      dataLabels: {
        enabled: false
      },
      levelIsConstant: false,
      levels: [{
        level: 1,
        dataLabels: {
          enabled: true
        },
        borderWidth: 3,
      }],
      opacity: 0,
      data: [{
        id: 'A',
        name: 'Apples'
      }, {
        id: 'B',
        name: 'Bananas'
      }, {
        id: 'O',
        name: 'Oranges'
      }, {
        name: 'Anne',
        parent: 'A',
        value: 5,
        colorValue: 5
      }, {
        name: 'Rick',
        parent: 'A',
        value: 3,
        colorValue: 3
      }, {
        name: 'Peter',
        parent: 'A',
        value: 4,
        colorValue: 4
      }, {
        name: 'Anne',
        parent: 'B',
        value: 4,
        colorValue: 4
      }, {
        name: 'Rick',
        parent: 'B',
        value: 10,
        colorValue: 10
      }, {
        name: 'Peter',
        parent: 'B',
        value: 1,
        colorValue: 1
      }, {
        name: 'Anne',
        parent: 'O',
        value: 1,
        colorValue: 1
      }, {
        name: 'Rick',
        parent: 'O',
        value: 3,
        colorValue: 3
      }, {
        name: 'Peter',
        parent: 'O',
        value: 3,
        colorValue: 3
      }, {
        name: 'Susanne',
        parent: 'Kiwi',
        value: 2,
        colorValue: 2
      }]
    }],
    tooltip: {
      backgroundColor: 'black',
      style: {
        "color": "white",
        "font": "Roboto"
      },
      borderColor: 'black',
      borderRadius: 5
    },
    colorAxis: {
      minColor: '#ffcfab',
      maxColor: '#ff5e43' //'#FF5E43',
    },
    legend: {
      enabled: false
    },
  });
});

      </script> 
   </head> 
   <body> 
      <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>  
   </body>
</html>

Related Tutorials