Highcharts Polar Chart

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

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

<button id="updateChart">
  Update chart
</button>

JavaScript

let allowChartUpdate = true;

const chart = Highcharts.chart('container', {
  "credits": {
    "enabled": false
  },
  "chart": {
    events: {
      redraw: function() {
        if (allowChartUpdate) {
          allowChartUpdate = false;
          const yAxis = this.yAxis[0];

          yAxis.update({
            plotBands: [{
              from: 0,
              to: yAxis.max,
              color: '#f6f8f9'
            }]
          });

          allowChartUpdate = true;
        }
      }
    },
    "polar": true,
    "marginBottom": -25,
    "type": 'area',
    "plotBackgroundColor": null,
    "plotBorderWidth": null,
    "plotShadow": false,
    margin: [50, 50, 50, 50],
    "style": {
      "fontWeight": 400,
      "fontSize": 11,
      "letterSpacing": "-0.06px",
      "lineHeight": "16px"
    }
  },
  "tooltip": {
    "enabled": false
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "min": 0,
    "categories": [
      "Behaviour Value",
      "Transaction Value",
      "Infulence Value"
    ],
    "tickmarkPlacement": "on",
    "lineWidth": 0,
    "gridLineWidth": 3,
    "labels": {
      "useHTML": true,
      "align": "center",
      distance: 40,
      formatter: function() {
        const chart = this.chart,
          x = this.value,
          y = chart.series[0].yData[this.pos];

        return `
        	<div style="text-align: center;">
          	<div>${x}</div>
            <div style="font-size: 22px; font-weight: bold; margin-top: 8px;">$${y}</div>
          </div>
        `;
      }
    }
  },
  "yAxis": {
    "gridLineInterpolation": "polygon",
    "min": 0,
    gridLineWidth: 0,
    plotBands: [{
      from: 0,
      to: 750,
      color: '#f6f8f9'
    }],
    "labels": {
      enabled: false,
    }
  },
  "plotOptions": {
    "series": {
      "marker": {
        "radius": 2.5
      },
      "states": {
        "hover": {
          "enabled": false
        },
        "inactive": {
          "opacity": 1
        }
      }
    },
  },
 ...