In Highcharts, how to create glow/shadow effect inside solidgauge?

Question

I'm trying to implement some sort of a glow effect inside the gauge, but can only achieve it on the outside. I was also trying to add the glow effect on a circle/background inside the gauge, but it is hidden below the green/orange areas.

Any help is much appreciated.

Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
    marginTop: 0
  },

  title: {
    text: false,
    style: {
      fontSize: '24px'
    }
  },

  tooltip: {
    borderWidth: 0,
    backgroundColor: 'none',
    shadow: false,
    style: {
      fontSize: '16px'
    },
    pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
    positioner: function(labelWidth) {
      return {
        x: 200 - labelWidth / 2,
        y: 180
      };
    }
  },

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{
      outerRadius: '88%',
      innerRadius: '70%',
      backgroundColor: 'white',
      borderWidth: 0
    }]
  },

  plotOptions: {
    solidgauge: {
      animation: false,
      dataLabels: {
        enabled: false
      },
      linecap: 'round',
      stickyTracking: false,
      rounded: true
    }
  },

  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    tickPositions: []
  },

  series: [{
    name: 'Something',
    data: [{
      color: '#e76a0b',
      radius: '112%',
      innerRadius: '88%',
      y: 100,
      borderColor: '#e76a0b'
    }, {
      color: '#007272',
      radius: '112%',
      innerRadius: '88%',
      y: 40,
      borderColor: '#007272'
    }]
  }]
});

.highcharts-series-group {
  filter: url(#glow)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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 id="container" style="width: 400px; height: 400px; margin: 0 auto">
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 300 300">
  <defs>
    <filter id="glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
      <feFlood result="flood" flood-color="#000" flood-opacity=".2"></feFlood>
      <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
      <feMorphology in="mask" result="dilated" operator="dilate" radius="3"></feMorphology>
      <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
      <feMerge>
        <feMergeNode in="blurred"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
  </defs>
</svg>

Demo: http://jsfiddle.net/remisture/f2srey6g/4/

Answer 1

Complete solution based on @GrzegorzBlachliński`s answer.

In order to create scalable shadow you can calculate its size based on the size of your chart in redraw and load event.

const chart = Highcharts.chart('container', {
  chart: {
    type: 'solidgauge',
    marginTop: 50,
    events: {
        load () {
        const chart = this
        const el = document.querySelector('.highcharts-tracker > path.highcharts-point')
        const {x, y, width, height } = el.getBBox()

        chart.shadow = chart
        .renderer.image('http://i.imgur.com/frVkXOh.png', x+10, y+50, width, height)
        .attr({ zIndex: 10 })
        .add()
      },
        redraw () {
        const chart = this
        const el = document.querySelector('.highcharts-tracker > path.highcharts-point')
                const {x, y, width, height } = el.getBBox()

        chart.shadow.attr({ x: x+10, y: y + 50, width, height })
      }
    }
  },

  title: {
    text: 'Activity',
    style: {
      fontSize: '24px'
    }
  },

  tooltip: {
    borderWidth: 0,
    backgroundColor: 'none',
    shadow: false,
    style: {
      fontSize: '16px'
    },
    pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
    positioner: function(labelWidth) {
      return {
        x: 200 - labelWidth / 2,
        y: 180
      };
    }
  },

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: []
  },

  plotOptions: {
    solidgauge: {
      animation: false,
      dataLabels: {
        enabled: false
      },
      linecap: 'round',
      stickyTracking: false,
      rounded: true
    }
  },

  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    tickPositions: []
  },

  series: [{
    name: 'Something',
    data: [{
      color: '#e76a0b',
      radius: '112%',
      innerRadius: '88%',
      y: 100,
      borderColor: '#e76a0b'
    }, {
      color: '#007272',
      radius: '112%',
      innerRadius: '88%',
      y: 40,
      borderColor: '#007272'
    }]
  }]
})

Live example: http://jsfiddle.net/kumrruhq/