Chapter 6: Mood Swing Detector (3)

Radial gradient radius is half of the gauge and locates at the bottom of the chart. Gradient starts from 15% of the radial radius and finishes at 85% position.

HTML

<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts-more.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',
                defaultSeriesType: 'gauge'
            },
            title: {
                text: null
            },
            credits: { 
                enabled: false
            },
            yAxis: {
                min: 0,
                max: 2,
                allowDecimals: false,
                labels: {
                    rotation: 'auto',
                    formatter: function() {
                              switch(this.value) {
                                  case 0:
                                     //return '<span style="font-size:20;color:#CAE6F1">Good</span>';
                                     return '<span style="font-size:20;color:#55BF3B">Good</span>';
                                  case 1:
                                     return '<span style="font-size:20;color:#988b0c">Bad</span>';
                                     //return 'Bad';
                                  case 2: 
                                     return '<span style="font-size:20;color:#DF5353">Very Bad</span>';
                              }
                     },
                    style: {
                        fontFamily: 'Courgette',
                        fontSize: 16,
                        color: '#8C8C8C', //'#CAE6F1'
                    }
                },
                lineWidth: 0,
                minorTickLength: 0,               
                tickLength: 0,
                offset: 5 
            },
            pane: {
                startAngle: -60,
                endAngle: 60,
                background: [{ 
                   //backgroundColor: '#004A97',
                   backgroundColor: {
                          backgroundColor: '#DF5353',
                         
                   },
                   borderWidth: 2,
                   borderColor: '#7F7F7F'    
               ...