Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto">
    <div id="container-speed" style="width: 600px; height: 200px; float: left"></div>
</div>

JavaScript

$(function () {

  $('#container-speed').highcharts(Highcharts.merge({}, 
    {
     "colors": [
     "#4FB04F"
     ],
     "yAxis": {
      "min": 0,
      "max": 200500500,
      "tickPositions": [
      0,
      15000050,
      150500500,
      200500500
      ],
      "labels": {
        "y": 24,
        distance: 25,
        "style": {
          "color": "#0e4d5c"
        }
      },
      "lineWidth": 0,
      "minorTickInterval": null,
      "tickWidth": 0,
      "title": {
        "enabled": false
      }
    },
    "series": [
    {
      "name": "Speed",
      "data": [
        150500500
      ]
    }
    ],
    "chart": {
      "type": "solidgauge",
      "height": 190
    },
    "title": {
      "text": ""
    },
    "pane": {
      "center": [
      "50%",
      "125%"
      ],
      "size": "240%",
      "startAngle": -70,
      "endAngle": 70,
      "background": {
        "backgroundColor": "#0e4d5c",
        "borderWidth": 0,
        "innerRadius": "81%",
        "outerRadius": "92%",
        "shape": "arc"
      }
    },
    "tooltip": {
      "enabled": false
    },
    "plotOptions": {
      "solidgauge": {
        "innerRadius": "88%",
        "radius": "85%",
        "dataLabels": {
          "enabled": false
        }
      }
    },
    "credits": {
      "enabled": false
    }
  }));

  });