Highcharts Demo

author(s): Torstein Hønsi

by Premchand R

HTML

<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

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

JavaScript

var chart = Highcharts.chart('container', {
  chart: {
    type: 'gauge',
    alignTicks: false,
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false,
    backgroundColor: 'rgba(255, 255, 255, 0.0)'
  },
  exporting: {
    enabled: false
  },
  title: {
    text: ''
  },
  pane: {
    startAngle: -150,
    endAngle: 150,
    background: {
      from: 0,
      to: 360,
      backgroundColor: '#f55',
      innerRadius: '85%',
      outerRadius: '50%',
      shape: 'arc'
    },
  },
  yAxis: [{
    lineWidth: 0,
    min: 0,
    max: 360,
    tickInterval: 1,
    tickPosition: 'outside',
    minorTickColor: '#FF0000',
    tickColor: '#FF0000',
    tickWidth: 2,
    tickLength: 10,
    minorTickPosition: 'outside',
    tickLength: 15,
    minorTickLength: 5,
    title: {
      text: '',
      style: {
        color: "#333"
      }
    },
    labels: {
      distance: 25,
    },
    offset: 5,
    endOnTick: false,
    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        }
      }
    },
    plotBands: [{
      from: 0,
      to: 360,
      color: '#21A121',
      thickness: '15%',
      id: 'plot-band-1'
    }]
  }],
  series: [{
    name: 'Managed',
    data: [{
      id: 'deliver',
      y: 220,
      dial: {
        backgroundColor: '#D9972E',
        radius: '100%',
        baseWidth: 10,
        baseLength: '5%',
        baseWidth: 15,
        rearLength: '0%',
      }
    }],
    dataLabels: {
      enabled: true,
      useHTML: true,
      formatter: function() {
        return '<i class="icon ion-arrow-up-a"></i>';
      },
      backgroundColor: {
        linearGradient: {
          x1: 10,
          y1: 10,
          x2: 10,
          y2: 11
        },
        stops: [
          [0, '#DDD'],
          [1, '#FFF']
        ]
      }
    },
    tooltip: {
      valueSuffix: ' '
    }
  }]
});