Treemap Demo

author(s): Jon Arild Nygård

by kzoon

HTML

<script src="http://github.highcharts.com/master/highcharts.js"></script>
<script src="http://github.highcharts.com/master/modules/treemap.js"></script>
<div id="container"></div>

CSS

#container {
  min-width: 300px;
  max-width: 600px;
  margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {


      "chart": {
        "reflow": false,
        "type": "treemap",
        "animation": false,
        "borderRadius": 0,
        "backgroundColor": "rgba(255,255,255,1)",
        "plotBackgroundColor": "rgba(255,255,255,0)",
        "spacingBottom": 10,
        "scAnimateChanges": false
      },
      "title": {
        "text": ""
      },
      "subtitle": {
        "text": ""
      },
      "legend": {
        "margin": 10,
        "backgroundColor": "rgba(255,255,255,0)",
        "borderWidth": 1,
        "squareSymbol": false,
        "symbolRadius": 0,
        "itemStyle": {
          "fontFamily": "'Lucida Grande', 'Lucida Sans Unicode'",
          "fontSize": "11px",
          "fontWeight": "normal",
          "color": "rgba(102,102,102,1)"
        }
      },
      "tooltip": {
        "enabled": true,
        "style": {
          "fontFamily": "'Lucida Grande', 'Lucida Sans Unicode'",
          "fontSize": "11px",
          "color": "rgba(102,102,102,1)",
          "whiteSpace": "normal"
        },
        "hideDelay": 10
      },
      "plotOptions": {
        "treemap": {
          "animation": false,
          "shadow": false,
          "stickyTracking": false,
          "dataLabels": {
            "enabled": false,
            "borderColor": "rgba(0,0,0,1)",
            "align": "center",
            "verticalAlign": "middle",
            "style": {
              "fontFamily": "'Lucida Grande', 'Lucida Sans Unicode'",
              "fontSize": "11px",
              "fontWeight": "normal",
              "color": "rgba(102,102,102,1)",
              "textOutline": false
            },
            "allowOverlap": true,
            "scFormat": {
              "pointName": {
                "enabled": true
              },
              "yValue": {
                "enabled": false
              }
            },
            "scSelection": {}
          },
          "scTooltipFormat": {
            "pointName": {
         ...