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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style=" width:100%;"></div>

CSS

.highcharts-axis-labels text:first-child {
  text-anchor: start
}

.highcharts-axis-labels text:last-child {
  text-anchor: end
}

JavaScript

/* setInterval(function() {

}, 1); */

var chart = Highcharts.chart({
  chart: {
    type: 'gauge',
    renderTo: "container",
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: null,
    plotShadow: false,
    height: 450 //window.innerHeight - 20,
  },
  title: {
    text: 'High Influencing Parameter'
  },
  subtitle: {
    useHtml: true,
    text: "<span style='font-size:20px'>Moisture</span><br><span style='font-size:16px'>01-Jul-2018 to 16-Jul-2018</span><br><span style='font-size:16px'>Count / Total = 14 / 28 Days = 50%</span>",
    align: 'center',
    verticalAlign: 'bottom',
    y: -50,
    style: {
      lineHeight: '30px',
      fontWeight: "bold",
      letterSpacing: "1px;"
    }
  },
  exporting: {
    buttons: {
      contextButton: {
        enabled: false
      }
    }
  },
  pane: {
    startAngle: -90,
    endAngle: 90,
    center: ['50%', '70%'],
    size: 500,
    background: {
      borderWidth: 2,
      borderColor: '#c7c7c7',
      backgroundColor: null,
      outerRadius: '105%',
      shape: 'arc'
    }
  },
  credits: {
    enabled: false
  },
  // the value axis
  yAxis: {
    min: 0,
    max: 100,
    minorTickInterval: 'auto',
    minorTickWidth: 1,
    minorTickLength: 10,
    minorTickPosition: 'inside',
    minorTickColor: '#666',
    tickPixelInterval: 30,
    tickWidth: 2,
    tickPosition: 'inside',
    tickLength: 20,
    tickColor: '#666',
    labels: {
      step: 2,
      rotation: 'auto',
      distance: -45,
      style: {
        fontSize: "15px",
        fontWeight: "bold"
      }
    },
    title: {
      text: '%'
    },
    plotBands: [{
      from: 50,
      to: 60,
      thickness: '6%',
      color: '#55BF3B' // green
    }, {
      from: 30,
      to: 50,
      thickness: '6%',
      color: 'Yellow' // green
    }, {
      from: 60,
      to: 80,
      thickness: '6%',
      color: 'Yellow' // green
    }, {
      from: 0,
      to: 30,
      thickness: '6%',
      color: 'red' //...