Bullet Guage

by nehamahajan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container1"></div>
</figure>

JavaScript

Highcharts.chart('container1', {
    chart: {
        marginTop: 40,
        inverted: true,
        marginLeft: 135,
        height: 200,
        type: 'bullet'
    },
    credits: {
        enabled: false
    },
    tooltip: {
    	enabled: false
    },
    title: {
        text: null
    },
    exporting: {
        enabled: false
    },
    xAxis: {
        categories: ['']
    },
    yAxis: {
        title: null
    },
    plotOptions: {
      series: {
          events: {
              legendItemClick: function() {
                return false;
              }
          }
      }
  	},
    legend: {
    	symbolRadius: 0,
      align: 'right',
      verticalAlign: 'middle',
      layout: 'vertical',
    },
    series: [{
          color: 'red',
          name: 'abc',
          pointWidth: 15,
          data: [10]
    },
    {
          color: 'yellow',
          name: 'xyz',
          pointWidth: 15,
          data: [5]
    },
    {
          color: 'green',
          name: 'pqr',
          pointWidth: 15,
          data: [5]
    }]
})