solid gauge chart with tick mark over the bar - Javascript highcharts

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Bar Chart

Description

solid gauge chart with tick mark over the bar

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/solid-gauge.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
Highcharts.chart("container", {
  chart: {/*from   ww  w .j ava  2 s  .  c  o  m*/
    type: 'solidgauge'
  },
  tooltip: {
    enabled: false
  },
  title: null,
  credits: {
    enabled: false
  },
  pane: {
    size: '100%',
    startAngle: -120,
    endAngle: 120,
    background: {
      innerRadius: '75%',
      outerRadius: '100%',
      backgroundColor: '#eeeeee',
      borderWidth: 0,
      shape: 'arc'
    }
  },
  plotOptions: {
    solidgauge: {
      innerRadius: '75%',
      radius: '100%',
      dataLabels: {
        enabled: true,
        useHTML: true,
        zIndex: 1000  //added zindex
      }
    }
  },
  yAxis: {
    labels: {
      enabled: false
    },
    min: 0,
    max: 100,
    gridLineColor: 'transparent',
    lineColor: 'transparent',
    minorTickLength: 0,
    tickPositions: [35],
    tickColor: '#000000',
    tickPosition: 'inside',
    tickLength: 50,
    tickWidth: 8,
    zIndex: 100, //added zindex
  },
  series: [{
    data: [40],
    dataLabels: {
            format: '<span style="font-size:25px">${y} M</span><br/>'
        },
        tooltip: {
            valueSuffix: ' km/h'
        }
  }]
});

      </script>  
   </body>
</html>

Related Tutorials