Highstock Navigator Displayed Twice

Question

I am using highstock,5.0.10 with angularJS. In my chart navigator got displayed twice, like below

As you can see, navigator has been rendered twice. However, if you refresh the page, everything looks fine. Any ideas?

I have added my Highstock code here.

Highcharts.stockChart('FindComputerUsage', {

            rangeSelector: {
                selected: 1
            },
            credits: {
                enabled: false
            },
            title: {
                text: ''
            },
            yAxis: {
                title: {
                    text: 'Percentage of time (%) '
                }

            },

            tooltip: {
                formatter: function() {

                    var date = new Date(requiredData[this.points[0].point.index][0]);
                    return date + '<br>' + 'Percentage:' + requiredData[this.points[0].point.index][1] + '%';
                }
            },
            series: [{
                name: 'Percentage (%)',
                data: requiredData,
                tooltip: {
                    valueDecimals: 2,
                }
            }],
            lang :{
                noData : "No data to display "
            }
        });

Answer 1

Here you can see a working example: https://plnkr.co/edit/OphM9wf8WyGm8U6HXfTy

You haven't show your HTML view, but I guess it's similar to this.

<div ng-controller="demoCtrl">
  <div id="container" style="height: 400px; min-width: 310px"></div>
</div>

Concerning controller scope, I didn't change anything:

var app = angular.module('demoApp', []);

app.controller('demoCtrl', function($scope){

  $scope.data = [
                  [1290729600000,45.00],
                  [1290988800000,45.27],
                  [1291075200000,44.45]
                ];

  Highcharts.stockChart('container', {
        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'Qing Xu Example'
        },

        series: [{
            name: 'Value',
            data: $scope.data,
            tooltip: {
                valueDecimals: 2
            }
        }]
  })

});