Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

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/exporting.js"></script>

<div id="graph-4" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('graph-4', {
  chart: {
    type: 'gauge',
    events: {
      load: function () {
        setInterval(function () {
          setText('myText', 0.3, !!Math.round(Math.random()));
        }, 1000)
      }
    }
  },

  series: [{
    data: [80]
  }]
});

function setText(text, x, check) {
  var chart = $('#graph-4').highcharts();
  var ret = this.customText;
  console.log(chart);
  if (check === true) {
    var color = '#ffffff';
  } else {
    var color = '#555555';
  }
  
  if (!ret) {
    ret = this.customText = chart.renderer.text(null, -9999, -9999)
    .attr({
      zIndex: 5
    })
    .css({
      fontSize: '13px',
      'text-anchor': 'middle'
    })
    .add();
  }
  
  ret.attr({
    text: text,
    x: chart.plotWidth * x,
    y: chart.plotHeight * 0.5
  }).css({
    color: color
  });
}