Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 500px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
  "chart": {
    "type": "variablepie",
    "margin": [
      0,
      200,
      20,
      0
    ]
  },
  "title": {
    "text": null
  },
  "tooltip": {
    "enabled": true
  },
  "legend": {
    "align": "right",
    "verticalAlign": "middle",
    "layout": "vertical",
    "rtl": true,
    "labelFormat": "{name} <span style=\"opacity: 0.4;\">({z})</span>",
    "itemStyle": {
      "fontSize": "11px"
    }
  },
  "plotOptions": {
    "series": {
      "innerSize": 0,
      "stacking": "normal",
      "showInLegend": true,
      "point": {
        "events": {}
      }
    }
  },
  "series": [{
      minPointSize: 0,
      zMax: 100,
      "innerSize": 0,
      "sizeBy": "radius",
      "name": "Subdomain score",
      "dataLabels": {
        "enabled": false
      },
      "tooltip": {
        "headerFormat": "<span style=\"color:{point.color}\">●</span><span style=\"font-size: 12px;font-weight:bold;\"> {point.key}</span><br/>",
        "pointFormat": "<br/>Score: {point.z}<br/>",
        "valueDecimals": 2
      },
      "data": [{
          "name": "Learning Strategies",
          "y": 12,
          "z": 75
        },
        {
          "name": "Intellectual Engagement",
          "y": 12,
          "z": 0
        },
        {
          "name": "Effort Control",
          "y": 12,
          "z": 56.6
        },
        {
          "name": "Attention",
          "y": 12,
          "z": 60
        },
        {
          "name": "Autonomy",
          "y": 12,
          "z": 66.6
        },
        {
          "name": "Social Cognition",
          "y": 12,
          "z": 46.6
        },
        {
          "name": "Current Emotional Health",
          "y": 12,
          "z": 52
        },
        {
          "name": "Self Compassion",
          "y": 12,
          "z": 68.6
        },
        {
          "name": "Stress Resilience",
          "y": 12,
          "z": 56
        },
        {
          "name": "Gratitude Positivity",
 ...