Chapter 6: Mood Swing Detector (5)

Same radial gradient size, use fx and fx to move the radial focal point from the pivot

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 'Good';
                                  case 1:
                                     // return '<span style="font-size:20">Bad</span>';
                                     return 'Bad';
                                  case 2: 
                                     return 'Ugly';
                              }
                     },
                    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: {
                       radialGradient: {
                           cx: 0.32,
                           cy: 0.38,
                            r: 0.25,
                           fx: 1.3,
                           fy: 0.95 
                       },
                       stops: [
                          ...