Tree map with color axis

author(s): Jon Arild Nygård

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
    },
    "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"
       ...