Dynamic Label Color - Javascript highcharts

Javascript examples for highcharts:Chart Label

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

Description

Dynamic Label Color

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 2s  .co  m
  var gaugeOptions = {
    chart: {
      type: 'solidgauge'
    },
    title: null,
    pane: {
      center: ['50%', '50%'],
      size: '90%',
      startAngle: 0,
      endAngle: 360,
      background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },
    tooltip: {
      enabled: false
    },
    colors: ["DF5353", "DDDF0D", "55BF3B"],
    // the value axis
    yAxis: {
      stops: [
        [0.1, '#DF5353'], // red
        [0.5, '#DDDF0D'], // yellow
        [0.9, '#55BF3B'] // green
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickPixelInterval: 400,
      tickWidth: 0,
      title: {
        y: -70
      },
      labels: {
        enabled: false
      }
    },
    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: -20,
          borderWidth: 0,
          useHTML: true
        }
      }
    }
  };
  // The speed gauge
  $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
      min: 0,
      max: 100
    },
    credits: {
      enabled: false
    },
    series: [{
      data: [80],
      dataLabels: {
        formatter: function() {
        let color = ''
        if(this.y > 50) {
           color = '#55BF3B' //green
        } else if(this.y > 10) {
           color = '#DDDF0D' //yellow
        } else {
           color = '#DF5353' //red
        }
           return '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' +
          color + '">' + this.y + '</span><br/>' +
          '</div>'
        },
      }
    }]
  }));
});

      </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> 
      <table border="1"> 
         <tbody>
            <tr> 
               <th>GRAPH</th> 
            </tr> 
            <tr> 
               <td> 
                  <div style="width: 64px; height: 60px; margin: 0 auto"> 
                     <div id="container-speed" style="width: 52px; height: 52px"></div> 
                  </div> 
               </td> 
            </tr> 
         </tbody>
      </table>  
   </body>
</html>

Related Tutorials