Tree map with color axis

author(s): Jon Arild Nygård

by Black Label

HTML

<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>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Tree maps are great tools for comparing values that are part
        of a whole, or for showing hierarchical data. This example
        is a simple tree map with no hierarchy, showing the value
        differences with rectangle sizes and using a color axis.
    </p>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 700px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {
  "chart": {
    "height": "50%",
    "marginRight": 200,
    "marginLeft": 200
  },
  "tooltip": {},
  "colorAxis": {
    "min": 0,
    "max": 50,
    "endOnTick": false,
    "minColor": "#ffffff",
    "maxColor": "#00CF64",
    "reversed": true
  },
  exporting: {
    csv: {
      columnHeaderFormatter: function(item) {
        // check if item is an axis
        if (item.tickPositions) {
          return 'Intent name'
        }
        return false;
      }
    }
  },
  "legend": {
    "symbolWidth": 500
  },
  "series": [{
    name: "count",
    "type": "treemap",
    "borderColor": "#fff",
    "borderRadius": 1,
    "borderWidth": 1,
    "colorKey": "value",
    "layoutAlgorithm": "squarified",
    "clip": false,
    "dataLabels": {
      "style": {
        "textOutline": "none"
      }
    },
    "data": [{
        "article_name": "Help",
        "category": "",
        "language_utterance_map": {
          "en": 5
        },
        "total_utterances": 5,
        "name": "Help",
        "value": 5,
        "languageData": "<b>en:</b> 5"
      },
      {
        "article_name": "Default fallback intent",
        "category": "",
        "language_utterance_map": {
          "en": 0
        },
        "total_utterances": 0,
        "name": "Default fallback intent",
        "value": 0,
        "languageData": "<b>en:</b> 0"
      },
      {
        "article_name": "Goodbye",
        "category": "",
        "language_utterance_map": {
          "en": 15
        },
        "total_utterances": 15,
        "name": "Goodbye",
        "value": 15,
        "languageData": "<b>en:</b> 15"
      },
      {
        "article_name": "Greetings",
        "category": "",
        "language_utterance_map": {
          "en": 24
        },
        "total_utterances": 24,
        "name": "Greetings",
        "value": 24,
        "languageData": "<b>en:</b> 24"
      },
      {
        "article_name": "Not helpful",
        "category": "",
       ...