Horizontal Gauge

by Ramkumar Pillai

HTML

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts First Example</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.7.1");
    </script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    </head>
<body>
    <div id="content">
      <div style="height: 120px;" id="container"></div>
    </div>
        </body>

JavaScript

$(function() {
    $(document).ready(function() {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'bar',
                plotBorderWidth: 2,
                plotBackgroundColor: '#F5E6E6',
                plotBorderColor: '#D8D8D8',
                plotShadow: true,
                spacingBottom: 43,
                width: 350
            },
            credits: {
                enabled: false
            },
            xAxis: {
                labels: {
                    enabled: false
                },
                tickLength: 0
            },
            title: {
                text: null
            },
            legend: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    y: 20
                },
                min: 0,
                max: 100,
                tickInterval: 20,
                minorTickInterval: 10,
                tickWidth: 1,
                tickLength: 8,
                minorTickLength: 5,
                minorTickWidth: 1,
                minorGridLineWidth: 0
            },
            plotOptions: {},
            series: [{
                borderColor: '#7070B8',
                borderRadius: 3,
                borderWidth: 1,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                    },
                    stops: [ //[ 0.35, '#7070B8' ], [0, '#D69999'],
                                                   [0.3, '#B84D4D'],
                                                   [0.45, '#7A0000'],
                                                   [0.55, '#7A0000'],
                                                   [0.7, '#B84D4D'],
                              ...