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": 340,
                "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",
 ...