Solid gauge update border

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 series</button>

JavaScript

var chart = Highcharts.chart('container', {


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

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

  }],
  "plotOptions": {
    "solidgauge": {
      "showInLegend": true,
      "colorByPoint": false
    }
  },
  "series": [{
    "innerRadius": "60%",
    "radius": "100%",
    "color": "yellow",
    "borderWidth": 4,
    "borderColor": "black",
    "data": [75]
  }]


});


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


  chart.series[0].update({
    "color": "green",
    "borderWidth": 0,
    "borderColor": "red",
    "data": [50]

  });

  chart.redraw();

});