meter text label behind needle for gauge chart - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

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

Description

meter text label behind needle for gauge chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from w w  w  . j a v a  2  s .c  o m
        temperature = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'gauge',
            height: 180,
        },
            title: {
                text: 'Some Other Text'
            },
            pane: [{
                startAngle: -45,
                endAngle: 45,
                background: null,
                center: ['50%', '140%'],
                size: 250
            }],
        credits: {
                                enabled: false
                },
            yAxis: [{
                min: -40,
                max: 40,
                minorTickPosition: 'outside',
                tickPosition: 'outside',
            tickInterval: 20,
                labels: {
                        rotation: 'auto',
                        distance: 20
                },
                plotBands: [{
                        from: 25,
                        to: 40,
                        color: '#C02316',
                        innerRadius: '100%',
                        outerRadius: '105%'
                },
            {
                        from: -40,
                        to: -10,
                        color: '#0000FF',
                        innerRadius: '100%',
                        outerRadius: '105%'
                }],
            title: {
                text: 'Some Text',
                align: 'middle',
                y: -110
                }
            }],
            plotOptions: {
                gauge: {
                        dataLabels: {
                                enabled: true
                        },
                        dial: {
                                radius: '100%'
                        }
                }
            },
            series: [{
                data: [10],
            }]
        })
});

      </script> 
   </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/exporting.js"></script> 
      <div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials