title: How can I style my highcharts solid gauge to have a background behind the percentage?
body: <p>I need to style it to look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/jsB8R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jsB8R.png" alt="enter image description here"></a></p>
  
  <p>This is the closest I've gotten. The trouble I'm having is achieving that gray background. I tried to do it with CSS but the html generated by highcharts makes that very difficult for me. </p>
  
  <p><a href="http://jsfiddle.net/60x7vkc2/1/" rel="nofollow noreferrer">http://jsfiddle.net/60x7vkc2/1/</a></p>
  
  <pre><code>$(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: '&lt;div style="text-align:center;"&gt;&lt;span style="font-size:14px;' +
            'black' + '"&gt;{y}%&lt;/span&gt;'
        }
      }]
  
    }));
  });
  </code></pre>