Highcharts Gauge Demo

by Chris Hughes

HTML

<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/exporting.js"></script>

<div class="gauge">
  <div id="gauge01" style="margin: 0 auto;width:100%"></div>
</div>

CSS

body {
  background-color: #f0f0f0;
  margin: 20px;
}

.gauge {
  max-width: 370px;
  padding-top: 10px;
  height: 300px;
  overflow: hidden;
  border-radius: 7px;
  background-color: #ffffff;
}

JavaScript

$(function() {

          // Issue #602 workaround
          Highcharts.seriesTypes.gauge.prototype.drawLegendSymbol =
            Highcharts.seriesTypes.column.prototype.drawLegendSymbol;

          var chartColors = ['#828282', '#424242'];
          var gaugePBColors = ['#ee745e', '#ffaf4d', '#ffdd62', '#6ed08c'];

          var chart = new Highcharts.Chart({

              chart: {
                renderTo: 'gauge01',
                type: 'gauge',
                backgroundColor: 'none'
              },

              colors: [
                chartColors[0],
                chartColors[1]
              ],

              credits: {
                enabled: false
              },

              title: {
                text: 'Projected Field Status',
                style: {
                  fontFamily: 'arial,helvetica,sans-serif',
                  color: chartColors[1],
                  fontWeight: 'bold',
                  fontSize: '24px'
                }
              },

              legend: {
                align: 'left',
                verticalAlign: 'bottom',
                layout: 'vertical',
                x: 0,
                y: -112,
                floating: true,
                borderWidth: 0
              },

              navigation: {
                buttonOptions: {
                  floating: true,
                  align: 'right',
                  verticalAlign: 'bottom',
                  y: -114,
                  backgroundColor: 'white',
                  borderWidth: 0,
                  symbolSize: 20
                },
                menuStyle: {
                  borderWidth: 0,
                  backgroundColor: '#424242',
                  borderRadius: '7px',
                  padding: '5px 0',
                  overflow: 'hidden',
                  BoxShadow: '2px 2px 4px rgba(255,0,0,1) !important'
                },
                menuItemStyle: {
                  fontSize: '12px',
                  color:...