Highchatsのredrawイベントが発火した際にグラフ上にHighchartsのannotation機能を使ってコメントを付けたい

やりたいこと

閲覧ありがとうございます！
Highchatsのredrawイベントが発火した際にグラフ上にHighchartsのannotation機能を使ってコメントを付けたいと思っています。

やったことと分からないこと

ソースコードが下記の2つです。
JavaScriptのソースの5行目のx.annotations.pushというようにannotationを付与できるようになっています。　
このコードでは，x:5,y:1の箇所にtest1という文字列を表示させています。
redrawイベントの処理はJavaScriptのソースの33行目で行っています。redrawイベントの内部に5行目と同様x.annotations.pushというようにx:10,y: 1の箇所にtest2という文字列を付与させるコードを記述しています。　
しかし，表示したグラフがredrawされてもx:10,y: 1の箇所にコメントが表示されません（表示したグラフ上でクリック＆ドラッグするとグラフがズームされredrawベントが発火します）
41行目のconsole.logでx.annotationsを確認したところannotationのラベルにはtest2が入っているように思います。　
コメントが表示されないのはグラフの描写タイミングの問題でしょうか？　
なにか解決策をご教授頂ければ幸いでございます。　
質問がへたくそで申し訳ありません、よろしくお願いします！

コード

html
1<html>
2<head>
3<meta charset="UTF-8" />
4<title>議論の可視化</title>
5 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
6<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
7<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
8<script src="http://code.highcharts.com/highcharts.js"></script>
9<script src="https://code.highcharts.com/modules/exporting.js"></script>
10<script src="https://code.highcharts.com/modules/export-data.js"></script>
11<script src="https://code.highcharts.com/modules/annotations.js"></script>
12
13
14<script type="text/javascript" src="situmon_sample.js"></script>
15
16
17<style >
18		/* css つまみサイズ調整 */
19		#slider .ui-slider-handle {
20			width:5px;
21			height:5px;
22			margin-top:2px;
23		}
24	</style>
25<style>
26    #slider{
27    	width:100;
28    	height:10;
29 z-index: 1;
30}</style>
31<style>
32 body {
33        width: 500px;
34        transform-origin: 0 0;
35        margin: 0;
36
37    }
38</style>
39<script>
40window.addEventListener( "scroll", function () {
41var element = document.getElementById("slider");
42//var value = document.getElementById("slidervalue");
43window.onscroll = function() {
44var scrollTop = document.body.scrollTop; 
45
46var scrollLeft= document.body.scrollLeft;
47console.log("縦に移動した位置："+ scrollTop + "px" );
48
49console.log("横に移動した位置："+ scrollLeft+ "px" );
50var scale =document.body.style.transform;
51var result1 = Number(scale.indexOf( '(' ));
52var result2 = result1 + 1;
53var result3 = scale.replace(')', '');
54result3 =Number( result3.slice(result2));
55console.log(typeof(scrollTop ) );
56console.log(typeof(value) );
57element.style.left = scrollLeft/result3;
58element.style.top  = scrollTop/result3; 
59}; 
60});
61
62    var change_scale = {
63        "container": 500,
64        "percent": 1,
65        "function": function(a) {
66            "use strict";
67            //if (change_scale.percent === window.devicePixelRatio) {
68                var scale = document.documentElement.clientWidth;
69                scale = a;//scale / change_scale.container;
70                scale = "scale(" + scale + ")";
71                document.body.style.transform = scale;
72               
73            /*} else {
74                change_scale.percent = window.devicePixelRatio;
75            }*/
76        }
77    };
78 
79  $(function() {
80 $( "#slider" ).slider({
81  max:5, //最大値
82  min: 1, //最小値
83  value: 1, //初期値
84  step: 0.5, //幅
85  //orientation: "vertical", //縦設置か横設置か
86 
87  slide: function( event, ui ) {
88   $("#slidervalue").html("slider："+ui.value);
89    console.log(ui.value);
90   change_scale.function(ui.value);
91    var w = 100/ui.value;
92   var width = String(w) + "px";
93   document.getElementById('slider').style.width = width;
94   var h = 10/ui.value;
95   var height = String(h) + "px";
96   document.getElementById('slider').style.height = height;
97  },
98  create: function( event, ui ) {
99   $("#slidervalue").html("create："+$(this).slider( "value" ));
100    console.log(ui.value);
101   change_scale.function(ui.value);
102  },
103  start: function( event, ui ){
104   $("#slidervalue").html("start："+ui.value);
105    console.log(ui.value);
106   change_scale.function(ui.value);
107
108  },
109  stop: function( event, ui ) {
110   $("#slidervalue").html("stop："+ui.value);
111   console.log(ui.value);
112   change_scale.function(ui.value);
113   var w = 100/ui.value;
114   var width = String(w) + "px";
115   document.getElementById('slider').style.width = width;
116   var h = 10/ui.value;
117   var height = String(h) + "px";
118   document.getElementById('slider').style.height = height;
119   
120  },
121  change: function( event, ui ) {
122   $("#slidervalue").html("change："+ui.value);
123    console.log(ui.value);
124   change_scale.function(ui.value);
125  }
126 });
127 //ボタンを押したら値を100にする 
128});
129  </script>
130</head>
131<body>
132<div id="slider"></div>
133
134   
135<div id="container" style="width: 400px; height: 600px; margin: 0 auto;position: absolute; left: 50px; top: 105px"></div>
136
137
138<style type="text/css">
139.rotate {
140transform: rotate(90deg);
141}
142select { width: 250px; }
143
144
145div { text-align : left ; }
146
147</style>
148<style>
149 div.box{
150    background-color: rgb(255,0,0,0.4);
151    width:200px;
152    height:700px;
153    position: absolute;
154    left: 1615px; 
155    top: 250px
156}
157</style>
158<div style="position:relative; top:500px; left: 400px;">
159<div class="rotate">
160
161   <source id="saisin_id" src="C:/shiramatsu/2d31ac72-28be-40d2-b69b-2d8677cd003d/audio.flac">
162  
163
164</div>
165</div>
166<div class="box"></div> 
167<textarea id="textarea1"  cols="30" value= "" style="background-color:transparent;font-size:30px; width: 300px; height: 300px;position: absolute; left: 500px; top: 2005px; ">
168  
169</textarea>
170
171</body>
172</html>

js
1$(document).ready(function() {
2   $(function showElement() {
3   var sample= [2,3,5,2,4,7,8,1,2,3,4,5,6,7,8];
4   x.series.push({name: 'use1', data: sample});
5    x.annotations.push(
6              {visible:true,draggable: "xy",labels: [{point: {xAxis: 0,yAxis: 0,x:5,y: 1},text: 'test1'}]},  
7              {labelOptions: {shape: 'connector',align: 'right',justify: false,crop: true,
8              style: {fontSize: '0.2em',textOutline: '1px white'}
9              },}
10              );
11   $('#container').highcharts(x);
12   })  
13      
14
15   var aTicksP = 0;
16   var aTicksV = 0;
17   var pic_time = [];
18   var newid;
19   var start_time;
20   var end_time;
21
22   var x = {
23     annotations: [
24
25        ],
26     chart: {
27      type: 'area',
28      animation: Highcharts.svg,
29      zoomType: 'x',
30      marginRight: 10,
31      
32      events: {
33            redraw: function(e){
34  
35              x.annotations.push(
36              {visible:true,draggable: "xy",labels: [{point: {xAxis: 0,yAxis: 0,x:10,y: 1},text: 'test2'}]},  
37              {labelOptions: {shape: 'connector',align: 'right',justify: false,crop: true,
38              style: {fontSize: '0.2em',textOutline: '1px white'}
39              },}
40            
41              ); console.log(x.annotations);
42                
43                
44              
45               
46                //saisinid = ("file:///C:/app1/"+data[0].id+"/audio.flac#t=1.0,2.0");
47            }
48        
49     },
50     
51      inverted: true
52     },
53
54
55    title: {
56      text: '発言量の時間変化',
57      style: {
58                  fontSize: '15px' // タイトルの文字サイズ
59                    }
60
61    },
62   
63   
64    xAxis: {
65      type : 'time',
66       categories: ["0.05","0.10","0.15","0.20","0.25","0.30","0.35","0.40","0.45","0.50","0.55","1.00","1.05","1.10","1.15","1.20","1.25","1.30","1.35","1.40","1.45","1.50","1.55","2.00","2.05","2.10","2.15","2.20","2.25","2.30","2.35","2.40","2.45","2.50","2.55","3.00","3.05","3.10","3.15",],
67        labels: {
68                  style: {
69                      fontSize: '15px' // x軸の値の文字サイズ
70                  }
71                    },
72
73      tickmarkPlacement: 'on',
74      title: {
75         enabled: false
76      }
77    },
78
79    yAxis: {
80
81      title: {
82         text: 'Activity',
83         style: {
84                  fontSize: '15px' // タイトルの文字サイズ
85                    }
86
87      },
88      labels: {
89                  style: {
90                      fontSize: '15px' // x軸の値の文字サイズ
91                  }
92                    },
93
94    },
95
96
97    tooltip: {
98    shared: true,
99    },
100
101
102    plotOptions: {
103      area: {
104         stacking: 'percentage',
105         lineColor: '#707070',
106         lineWidth: 1,
107         marker: {
108            lineWidth: 1,
109            lineColor: '#707070'
110         }
111      }
112    },
113
114    
115
116   
117    
118
119    legend: {        
120    },
121
122
123    credits: {
124    enabled: false
125    },
126      
127
128    series: [
129      ]
130
131};
132
133});