Solid gauge update

by kzoon

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/solid-gauge.js"></script>
<div id="container" style="width: 500px; height: 300px;"></div>
<button id="myButton">Update pane to red</button>

JavaScript

Highcharts.chart('container', {


  "chart": {
    "type": "solidgauge"
  },
  "pane": {
    "size": "100%",
    "background": [{
      "backgroundColor": "green",
      "borderWidth": 0,
      "innerRadius": "60%",
      "outerRadius": "100%",
      "shape": "arc"
    }]
  },
  "title": {
    "text": "",
    "margin": 0
  },

  "yAxis": [{
    "lineWidth": 0,
    "tickPositions": [],

  }],
  "series": [{
    "color": "rgba(68,114,196,1)",
    "innerRadius": "60%",
    "radius": "100%",
    "data": [62.7],
    "showInLegend": false
  }]


});


$('#myButton').click(function() {


  chart.update({
    "pane": {
      "size": "100%",
      "background": [{
        "backgroundColor": "red",
        "borderWidth": 0,
        "innerRadius": "60%",
        "outerRadius": "100%",
        "shape": "arc"
      }]
    }

  });
  chart.redraw();

});