Wordcloud with treemap data

by kzoon

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/wordcloud.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto
}

JavaScript

Highcharts.chart('container', {




  "chart": {
    "reflow": false,
    "type": "wordcloud",
    "animation": false,
    "borderRadius": 0,
    "backgroundColor": "rgba(255,255,255,1)",
    "plotBackgroundColor": "rgba(255,255,255,0)",
    "spacingBottom": 10,
    "scAnimateChanges": false
  },
  "drilldown": {},
  "title": {
    "text": "",
    "margin": 0
  },
  "subtitle": {
    "text": "",
    "margin": 0
  },
  "legend": {
    "margin": 10,
    "backgroundColor": "rgba(255,255,255,0)",
    "borderWidth": 1,
    "borderColor": "rgba(177,177,177,1)",
    "squareSymbol": false,
    "symbolRadius": 0,
    "itemStyle": {
      "fontFamily": "'Lucida Grande', 'Lucida Sans Unicode'",
      "fontSize": "11px",
      "fontWeight": "normal",
      "color": "rgba(60,60,60,1)"
    }
  },
  "tooltip": {
    pointFormat: '{point.weight}',
    "enabled": true,
    "backgroundColor": "rgba(255,255,255,1)",
    "style": {
      "fontFamily": "'Lucida Grande', 'Lucida Sans Unicode'",
      "fontSize": "11px",
      "color": "rgba(60,60,60,1)"
    },
    "useHTML": true,
    "backgroundColor": "rgba(255,255,255,1)",
    "hideDelay": 10,
    "outside": true
  },
  "plotOptions": {
    "treemap": {

      "animation": false,
      "shadow": false,
      "stickyTracking": false,
      "dataLabels": {
        "enabled": true,
        "borderColor": "rgba(0,0,0,1)",
        "align": "center",
        "verticalAlign": "middle",
        "style": {
          "fontFamily": "'Lucida Grande', 'Lucida Sans Unicode'",
          "fontSize": "16px",
          "fontWeight": "normal",
          "color": "rgba(255,255,255,1)",
          "textOutline": false,
          "textAlign": "center"
        },
        "allowOverlap": true,
        "useHTML": true,
        "scFormat": {
          "pointName": {
            "enabled": true,
            "linebreak": true
          },
          "yValue": {
            "enabled": false
          },
          "percentage": {
            "enabled": true
     ...