title: High Chart change gauge needle to a triangle
body: <p>I want to create a semi circle that contains a gauge embedded in it. </p>
  
  <p>Example:<a href="http://jsfiddle.net/ymf2zzn1/1/" rel="nofollow noreferrer">Semi Circle Pie With Gauge</a></p>
  
  <pre><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts-more.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"&gt;&lt;/div&gt;
  
  $(function () {
      $('#container').highcharts({
          chart: {
              renderTo: 'container',
              plotBackgroundColor: null,
              plotBackgroundImage: null,
              plotBorderWidth: 0,
              plotShadow: false
          },
          title: {
              text: 'Browser&lt;br&gt;shares&lt;br&gt;2015',
              align: 'center',
              verticalAlign: 'top',
              y: 40
          },
          tooltip: {
              pointFormat: '{series.name}: &lt;b&gt;{point.percentage:.1f}%&lt;/b&gt;'
          },
          pane: {
              center: ['50%', '75%'],
              size: '50%',
              startAngle: -90,
              endAngle: 90,
              background: {
                  borderWidth: 0,
                  backgroundColor: 'none',
                  innerRadius: '60%',
                  outerRadius: '100%',
                  shape: 'arc'
              }
          },
          yAxis: [{
              lineWidth: 0,
              min: 0,
              max: 90,
              minorTickLength: 0,
              tickLength: 0,
              tickWidth: 0,
              labels: {
                  enabled: false
              },
              title: {
                  text: '', //'&lt;div class="gaugeFooter"&gt;46% Rate&lt;/div&gt;',
                  useHTML: true,
                  y: 80
              },
              /*plotBands: [{
                  from: 0,
                  to: 46,
                  color: 'pink',
                  innerRadius: '100%',
                  outerRadius: '0%'
              },{
                  from: 46,
                  to: 90,
                  color: 'tan',
                  innerRadius: '100%',
                  outerRadius: '0%'
              }],*/
              pane: 0,
  
          }],
          plotOptions: {
              pie: {
                  dataLabels: {
                      enabled: true,
                      distance: -50,
                      style: {
                          fontWeight: 'bold',
                          color: 'white',
                          textShadow: '0px 1px 2px black'
                      }
                  },
                  startAngle: -90,
                  endAngle: 90,
                  center: ['50%', '75%']
              },
              gauge: {
                  dataLabels: {
                      enabled: false
                  },
                  dial: {
                      radius: '100%'
                  }
              }
          },
  
          series: [{
              type: 'pie',
              name: 'Browser share',
              innerSize: '50%',
              data: [
                  ['Firefox',   25],
                  ['IE',       25],
                  ['Chrome', 25],
                  ['Opera',     25]
              ]
          },{
              type: 'gauge',
              data: [40],
              dial: {
                  rearLength: 0
              }
          }],
      });    
  });
  </code></pre>
  
  <p>I want to change the needle to become a pure css triangle.</p>
  
  <p>Is there a way todo this?</p>