Chapter 6: Fiat 500 Speedometer (6)

Widen the width of both dials

HTML

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

JavaScript

$(document).ready(function() {
    var speedColor = '#474337';
    var rpmColor = '#BBB59C';
    var kmhArr = [ 0, 20, 40, 60, 90, 120, 150, 180, 210 ];
    var hiRef = '#A41E09';
    var dialColor = '#FA3421';
    var currentRpm = 0;

    var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                alignTicks: false
            },
            title: {
                text: 'Fiat 500 Speedometer'
            },
            pane: [{
                startAngle: -120,
                endAngle: 120,
                size: 300
               
            }, {
                startAngle: -120,
                endAngle: 120,
                size: 200
            }],
            yAxis: [{
                min: 0,
                max: 140,
                labels: {
                   rotation: 'auto'
                },
                pane: 0
            }, {
                min: 0,
                max: 6,
                labels: {
                   rotation: 'auto'                  
                },
                pane: 1
            }],
            tooltip: { enabled: false },
           
            series: [{
                type: 'gauge',
                name: 'Speed',
                data: [{
                    y:10,
                    dataLabels:{
                       enabled: true, 
                        //align: "left"
                        x:-60,
                        y:60,
                        borderWidth:0
                    }
                }],               
                yAxis: 0,
                dial: {
                    backgroundColor: dialColor,
                    baseLength: '90%',
                    baseWidth: 7,
                    topWidth: 3,
                    borderColor: '#B17964',
                    borderWidth: 1
                }
            }, {
                type: 'gauge',
                name: 'RPM',
                 data: [{
                    y:4,
             ...