Horizontal Gauge

by Pranav Desai

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: 'column',
                plotBorderWidth: 1,
                plotBackgroundColor: '#F5E6E6',
                plotBorderColor: '#D8D8D8',
                plotShadow: true,
                spacingBottom: 5,
                width: 80,
                height: 200
            },
            credits: {
                enabled: false
            },
            xAxis: 
                        
            {
                labels: {
                    enabled: false
                },
                tickLength: 0
            },
            title: {
                text: null
            },
            legend: {
                enabled: false
            },
            yAxis: 
           
            {
                
                title: {
                    text: null
                },
                labels: {
                },
                min: 0,
                max: 100,
                tickInterval: 20,
                minorTickInterval: 10,
                tickWidth: 2,
                tickLength: 8,
                minorTickLength: 5,
                minorTickWidth: 1,
                minorGridLineWidth: 0
            },
            plotOptions: {},
            series: [
                {
                    type:'line',
                    data:[[0,50],[30,50]],
                    lineColor:'#000000',
                    lineWidth:7,
                    zIndex:4,
                    marker:{enabled:false}
                },
                
                {
                borderColor: '#cccccc',
                borderRadius: 1,
                borderWidth: 1,
                color: {
                    linearGradient: { 
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                   ...