Horizontal Arc

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/4.1.9/highcharts.js"></script>
<script src="https://code.highcharts.com/4.1.9/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {

    $('#container').highcharts({
        "chart": {
            "inverted": false,
            "backgroundColor": "rgba(255,255,255,0)",
            "reflow": false,
            "height": 704,
            "width": 1049,
            "plotBackgroundColor": "rgba(255,255,255,0)",
            "zoomType": "xy",
            "resetZoomButton": {
                "theme": {
                    "fill": "#ffffff",
                    "stroke": "#0000ff",
                    "r": 0,
                    "style": {
                        "color": "#0000ff",
                        "cursor": "pointer",
                        "fontSize": "0.714rem",
                        "fontFamily": "Lucida Sans Unicode"
                    },
                    "states": {
                        "hover": {
                            "fill": "#003ce1",
                            "style": {
                                "color": "#ffffff"
                            }
                        }
                    }
                }
            },
            "renderTo": {},
            "events": {}
        },
        "title": {
            "text": null
        },
        "tooltip": {
            "enabled": true,
            "shared": false,
            "borderWidth": 1,
            "borderRadius": 1,
            "backgroundColor": "#ffffff",
            "style": {
                "color": "#000000",
                "fontSize": "0.857rem",
                "fontFamily": "Lucida Sans Unicode",
                "fontWeight": "normal",
                "fontStyle": "normal",
                "textDecoration": "none"
            },
            "crosshairs": [null, null]
        },
        "plotOptions": {
            "gauge": {
                "animation": {
                    "duration": 700
                },
                "cursor": "pointer",
                "showInLegend": true,
                "turboThreshold": 0,
                "events": {}
            }
        },
...