Gauge

Highchart guage with styling and animation

by Richard Houltz

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="width: 100%; height: 100%; margin: 0 auto"></div>

JavaScript

var easeOutBounce = function (t) { return (.02 - .02 / t) * Math.sin(25 * t) + 1  }

Math.easeOutBounce = easeOutBounce;



Highcharts.chart('container', {

    chart: {
        type: 'gauge',
         animation: {
            duration: 2000,
            // Uses Math.easeOutBounce
            easing: ''
        },
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false,
        style: {
                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
                    fontSize: 16
                },
                backgroundColor: 'transparent'
    },

    title: {
        text: null
    },
    credits: false,
    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#DDD'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            backgroundColor: '#FFFFFF',
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },
    
     plotOptions: {
        gauge: {
         animation: {
            duration: 2000,
            // Uses Math.easeOutBounce
            easing: 'easeOutBounce'
        },
            dial: {
                radius: '90%',
                backgroundColor: '#FF6666',
                borderColor: 'gray',
                borderWidth: 1,
                baseWidth: 7,
                topWidth: 1,
                baseLength: '10%', // of radius
                rearLength: '20%'
            },
            pivot: {
                radius: '3%',
                borderWidth: 1,
                //borderColor:...