Tree map with color axis

v8.1.2

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/8.1.2/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/treemap.js"></script>


<div id="container"></div>

JavaScript

Highcharts.chart('container', {
  "chart": {
    "type": "treemap"
  },
  "legend": {
    "enabled": true,
    "item": {},
    "borderWidth": 0,
    "layout": "horizontal",
    "backgroundColor": "rgba(255,255,255,0)",
    "itemStyle": {
      "color": "#000000",
      "fontSize": "1rem",
      "fontFamily": "Open Sans",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "textDecoration": "none"
    },
    "align": "center",
    "verticalAlign": "bottom",
    "margin": 12,
    "padding": 8
  },
  "series": [{
    "layoutAlgorithm": "squarified",
    "levels": null,
    "alternateStartingDirection": true,
    "type": "treemap",
    "name": "Id",
    "id": "series0",
    "internalName": "bugs__bugs__Msr_Id_1",
    "data": [{
      "name": "resolved",
      "value": 3839053,
      "colorValue": 3839053
    }, {
      "name": "new",
      "value": 56324,
      "colorValue": 56324
    }, {
      "name": "feedback",
      "value": 472582,
      "colorValue": 472582
    }, {
      "name": "confirmed",
      "value": 59168,
      "colorValue": 59168
    }, {
      "name": "assigned",
      "value": 20817244,
      "colorValue": 20817244
    }, {
      "name": "acknowledged",
      "value": 532258,
      "colorValue": 532258
    }],
    "dataLabels": {
      "enabled": true
    },
    "color": "rgba(0,41,170,1)",
    "showInLegend": false
  }],
  "colorAxis": {
    "stops": [
      [0, "rgba(0,41,170,1)"],
      [0.5, "rgba(65,146,217,1)"],
      [1, "rgba(242,174,48,1)"]
    ],
    "labels": {
      "enabled": true,
      "style": {
        "color": "#000000",
        "fontFamily": "Open Sans",
        "fontSize": "1rem",
        "fontStyle": "normal",
        "fontWeight": "normal",
        "textDecoration": "none"
      },
      "rotation": 0
    },
    "tickWidth": 0,
    "allowDecimals": false,
    "min": 0,
    "tickInterval": 10000,
    "reversed": false,
    "id": "colorAxis0",
    "axisInternalName": "0"
  }
});