eQ Arc Horizontal

by Pawan Jadhav

HTML

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

<div id="container" style=" margin: 0 auto"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    "chart": {
      "inverted": false,      
      "reflow": true,
  
    },
    "pane": [{
      "startAngle": -55,
      "endAngle": 55,
      "center": ["50%", "70%"],
      "background": [{
        "shape": "arc",
        "innerRadius": "100%",
        "backgroundColor": null,
        "outerRadius": "50%"
      }],
      "size": "500"
    }],
    "yAxis": [{
      "min": 0,
      "max": 54,
      "tickPixelInterval": 30,
      "tickColor": "#666",
      "labels": {
        "enabled": true,
        "step": 2,
        "rotation": "auto",
        "distance": 20
      },
      "pane": 0,
      "plotBands": [],
      "tickPosition": "outside",
      "minorTickPosition": "outside"
    }],
    "series": [{
      "type": "gauge",
      "data": [{
        "y": 45
      }],
      "color": "rgba(106,0,255,1)",
      "yAxis": 0,
      "dial": {
        "radius": "100%",
       "rearLength": "-50%"
      },
      "point": {
        "events": {}
      },
      "pivot": {
        "radius": 0
      },
      "zIndex": 1,
      "eQFormat": "#,###,###,##0.00"
    }]
  });
});