Chapter 4: Converting a Single Bar Chart into a Horizontal Gauge Chart

Restrict the plot area and put a single bar to make it look like a horizontal gauge chart

by rgendron

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div style="margin: 5px 60px 5px 5px;" id='container'></div>
</body>

JavaScript

$(document).ready(function() {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar',
                plotBorderWidth: 2,
                plotBackgroundColor: '#D6D6EB',
                plotBorderColor: '#D8D8D8',
                plotShadow: true,
                spacingBottom: 43,
                height: 120,
                width: 350
            },
            credits: { 
               position: {
                  align: 'left',
                  x: 20,
                  y: 0
               },
               text: 'Source: U.S. Patent & Trademark Office'
            },
            subtitle: {
               text: 'Patents Granted in 2011 Originated from US (%)',
               verticalAlign: 'bottom',
               y: 23
            },
            xAxis: {
                categories: [ 'US' ],
                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, '#D6D6EB' ],
                            [ 0.3, '#5C5CAD' ],
                            [ 0.45, '#5C5C9C' ],
                            [ 0.55, '#5C5C9C' ],
             ...