title: Is to possible to delay the needle loading animation in Highcharts angular gauge?
body: <p>I have created a Highcharts Angular gauge. I need to delay the needle loading animation.</p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
  
      $('#meter').highcharts({
  
          chart: {
              type: 'gauge',
              plotBackgroundColor: null,
              plotBackgroundImage: null,
              plotBorderWidth: 0,
              plotShadow: false
          },
        credits: {
            enabled: false
        },
          title: {
              text: ''
          },
        //
        plotOptions: {
              gauge: {
                  dataLabels: {
                      enabled: false
                  },
                  dial: {
                      radius: '70%',
                      backgroundColor: '#000',
                      topWidth: 1,
                      baseWidth: 5,
                      rearLength: '20%'
                  },
                  pivot: {
                      radius: 5,
                      borderWidth: 5,
                      borderColor: '#000',
                      backgroundColor: '#fff'
                  }
              }
          },
  
          pane: {
              startAngle:-90,
              endAngle: 90,
              center: ['50%', '55%'],
                  size: '85%',
                  startAngle: -90,
                  endAngle: 90,              
                  background: {
                      backgroundColor: '#0187CC',
                      innerRadius: '110%',
                      outerRadius: '100%',
                      borderColor: 'transparent',
                      shape: 'arc',
                      
                  },
          },
  
          // the value axis
          yAxis: {
              min: 0,
              max: 30,
              
              minorTickInterval: 'auto',
              minorTickWidth: 0,            
              minorTickLength: 10,
              minorTickPosition: 'inside',
              minorTickColor: '#0187CC',            
  
              tickPixelInterval: 30,
              tickWidth: 10,
              tickPosition: 'inside',
              tickLength: 10,
              tickColor: '#0187CC',           
              labels: {
                  step: 2,
                  rotation: 'auto'
              },
              title: {
                  text: ''
              },
              plotBands: [{              
                  color: '#FFF' 
              } 
            ]
          },
  
          series: [{
              name: 'Speed',
              data: [20],
              tooltip: {
                  valueSuffix: ' Mbps'
              }
          }]
  
      },
  
      // Add some life
      function (chart) {
          if (!chart.renderer.forExport) {
              setInterval(function () {
                  var point = chart.series[0].points[0],
                      newVal,
                      inc = Math.round((Math.random() - 0) * 0);
  
                  newVal = point.y + inc;
                  if (newVal &lt; 0 || newVal &gt; 200) {
                      newVal = point.y - inc;
                  }
  
                  point.update(newVal);
  
              }, 3000);
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.highcharts-title, .highcharts-button, .highcharts-data-labels, .highcharts-tooltip, .highcharts-axis path:last-child , .highcharts-axis path:first-child, .highcharts-axis path:nth-child(13){
   display: none;
  }
  
  
  .highcharts-axis-labels text{
   fill: #000 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.0.0.min.js"&gt;&lt;/script&gt;
  &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;script src="meter.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="meter" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>