solid gauge max value setting - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

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

Description

solid gauge max value setting

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://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {/*from   ww w  . j a v a 2  s .com*/
    $('#container').highcharts({
       chart: {
           type: 'gauge',
           plotBackgroundColor: null,
           plotBackgroundImage: null,
           plotBorderWidth: 0,
           plotShadow: false
       },
       title: {
           text: 'Speedometer'
       },
       pane: {
           startAngle: -150,
           endAngle: 150,
           background: [{
               backgroundColor: {
                   linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                   stops: [
                       [0, '#FFF'],
                       [1, '#333']
                   ]
               },
               borderWidth: 0,
               outerRadius: '109%'
           }, {
               backgroundColor: {
                   linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                   stops: [
                       [0, '#333'],
                       [1, '#FFF']
                   ]
               },
               borderWidth: 1,
               outerRadius: '107%'
           }, {
               // default background
           }, {
               backgroundColor: '#DDD',
               borderWidth: 0,
               outerRadius: '105%',
               innerRadius: '103%'
           }]
       },
       // the value axis
       yAxis: {
           min: 0,
           max: 96,
            tickInterval:8,
           tickWidth: 2,
           tickPosition: 'inside',
           tickLength: 10,
           tickColor: '#666',
           labels: {
               step: 2,
               rotation: 'auto'
           },
           title: {
               text: 'km/h'
           },
           plotBands: [{
               from: 0,
               to: 120,
               color: '#55BF3B' // green
           }, {
               from: 120,
               to: 160,
               color: '#DDDF0D' // yellow
           }, {
               from: 160,
               to: 200,
               color: '#DF5353' // red
           }]
       },
       series: [{
           name: 'Speed',
           data: [80],
           tooltip: {
               valueSuffix: ' km/h'
           }
       }]
   },
   // Add some life
   function (chart) {
      if (!chart.renderer.forExport) {
          setInterval(function () {
              var point = chart.series[0].points[0],
                  newVal,
                  inc = Math.round((Math.random() - 0.5) * 20);
              newVal = point.y + inc;
              if (newVal < 0 || newVal > 200) {
                  newVal = point.y - inc;
              }
              point.update(newVal);
          }, 3000);
      }
   });
});

      </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="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials