Highcharts Demo

by maritavindedal

HTML

<script src="https://github.highcharts.com/5c98f6c439/highcharts.js"></script>
<script src="https://github.highcharts.com/5c98f6c439/modules/accessibility.js"></script>
<script src="https://github.highcharts.com/5c98f6c439/highcharts-more.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

#container {
    max-width: 400px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

JavaScript

Highcharts.chart('container', {
    accessibility: {
        enabled: false
    },
    chart: {
        type: 'gauge',
        height: '80%',
        marginTop: 20
    },
    title: {
        text: 'Coffee Consumption'
    },

    pane: {
        startAngle: -90,
        endAngle: 89.9,
        background: null,
        center: ['50%', '75%'],
        size: '110%'
    },

    yAxis: {
        min: 0,
        max: 12,
        tickInterval: 4,
        tickColor: '#000000',
        tickLength: 20,
        tickWidth: 2,
        minorTicks: true,
        minorTickWidth: 2,
        minorTicksPerMajor: 4,
        minorTickColor: '#000000',
        labels: {
            distance: 20,
            style: {
                fontSize: '16px'
            }
        },
        lineColor: '#000000',
        lineWidth: 2,
        plotBands: [{
            from: 0,
            to: 4,
            color: '#2A9D8F', // teal
            thickness: 20
        }, {
            from: 4,
            to: 8,
            color: '#F9C74F', // yellow
            thickness: 20
        }, {
            from: 8,
            to: 12,
            color: '#FF5733', // red
            thickness: 20
        }]
    },

    series: [{
        name: 'Coffee',
        data: [7],
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y} cups/day</b>'
        },
        dataLabels: {
            format: '{y} cups/day',
            borderWidth: 0,
            color: '#000000',
            style: {
                fontSize: '16px'
            }
        },
        dial: {
            radius: '80%',
            backgroundColor: '#000000',
            baseWidth: 12,
            baseLength: '0%',
            rearLength: '0%'
        },
        pivot: {
            backgroundColor: '#000000',
            radius: 6
        }

    }]
});

const svg = document.getElementsByClassName('highcharts-root')[0];

// Adding a title to the SVG
document.getElementById('container').setAttribute('aria-hidden',...