style solid gauge chart to have a background behind the percentage? - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

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

Description

style solid gauge chart to have a background behind the percentage?

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> 
      <style id="compiled-css" type="text/css">

.gauge-wrapper {//from  w w w . ja  v a 2 s .co  m
   text-align: center;
   width: 33%;
   float: left;
   background-color: red
}
.gauge {
   display: block;
   margin: auto;
   width: 200px;
   height: 115px;
   background-color: blue
}
.prc {
   position: relative;
   top: 0px;
   width: 70px;
   height: 35px;
   background-color: #ddd;
   border-radius: 70px 70px 0 0;
}
.prc span {
   position: relative;
   top: 12px;
}


      </style> 
      <script type="text/javascript">
    $(function() {
      var gaugeOptions = {
        chart: {
          type: 'solidgauge'
        },
        title: null,
        pane: {
          center: ['50%', '95%'],
          size: '190%',
          startAngle: -90,
          endAngle: 90,
          background: {
            backgroundColor: '#ddd',
            outerRadius: '100%',
            innerRadius: '90%',
            shape: 'arc',
            borderColor: 'transparent',
          }
        },
        tooltip: {
          enabled: false
        },
        title: {
          style: {
              color: '#666',
              fontSize: '16px',
              fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
          }
        },
        // the value axis
        yAxis: {
          stops: [
            [0.1, '#c62026'], // red
            [0.25, '#e77525'], // orange
            [0.75, '#70be44'] // green
          ],
          lineWidth: 0,
          minorTickInterval: null,
          tickPixelInterval: 0,
          tickWidth: 0,
          title: {
            y: -50
          },
          labels: {
            y: 16
          }
        },
        plotOptions: {
          solidgauge: {
            innerRadius: '90%',
            dataLabels: {
              y: 5,
              borderWidth: 0,
              useHTML: true
            },
          }
        },
        credits: {
          enabled: false
        },
      };
      // ON TARGET
      $('#ex-gauge').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
          min: 0,
          max: 100
        },
        title: {
          text: 'Title',
        },
        series: [{
          name: 'customers',
          data: [63.7],
          dataLabels: {
            format: '<div class="prc" style="text-align:center;"><span style="font-size:14px;' +
              'black' + '">{y}%</span>'
          }
        }]
      }));
    });

      </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/solid-gauge.js"></script> 
      <div class="gauge-wrapper"> 
         <div id="ex-gauge" class="gauge" style=""></div> 
      </div>  
   </body>
</html>

Related Tutorials