추세선이 하이 차트에 추가되면 차트 너비가 변경됩니다.

심각한 문제가 있습니다. 차트의 상단 (약 70-85도 근처)에서 조금 아래쪽으로 시작하는 추세선을 추가하려고 할 때마다 폭이 변경됩니다. 그러나 수직적이고 수평선의 경우에 나는 문제에 직면하지 않고있다. 이것을 막을 수있는 방법이 있습니까?추세선이 하이 차트에 추가되면 차트 너비가 변경됩니다.

내 코드는 다음과 같습니다

$(function() { 
      $.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) { 
     // create the chart 
     var onadata =[]; 
     var yData=[];  
     var type='line';    
     var datalen=data.candles.length; 
     var all_points= []; 
     var all_str=""; 

     for(var i=0; i<datalen;i++) 
     { 
      var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid] 
      onadata.push(each); 
      yData.push(data.candles[i].closeMid); 
     } 

     chart(); 

     function chart() 
     { 
      $('#container').highcharts('StockChart', { 

        credits: { 
         enabled : 0 
        }, 

        rangeSelector : { 
         buttons: [{ 
          type: 'month', 
          count: 1, 
          text: '1M' 
         }, { 
          type: 'month', 
          count: 3, 
          text: '3M' 
         },{ 
          type: 'month', 
          count: 6, 
          text: '6M' 
         },{ 
          type: 'all', 
          text: 'All' 
         }], 
         selected:3  
        }, 

        legend: { 
         enabled: true, 
         layout: 'vertical', 
         align: 'right', 
         verticalAlign: 'middle', 
         borderWidth: 0 
        }, 

        title : { 
         text : 'Stock Price' 
        }, 

        xAxis :{ 
         minRange : 3600000 
        }, 

        chart: { 
         events: { 
          click: function(event) {         
           var x1=event.xAxis[0].value; 
           var x2 =this.xAxis[0].toPixels(x1);    
           var y1=event.yAxis[0].value; 
           var y2 =this.yAxis[0].toPixels(y1); 

           selected_point='['+x1+','+y1+']';        
           all_points.push(selected_point); 
           all_str=all_points.toString();        
           if(all_points.length>1) 
           { 

            this.addSeries({        
            type : 'line', 
            name : 'Trendline', 
            id: 'trend',  
            data: JSON.parse("[" + all_str + "]"),      
            color:'#'+(Math.random()*0xEEEEEE<<0).toString(16), 
            marker:{enabled:true} 
            }); 

           } 

           if(all_points.length==2) 
           { 
            all_points=[]; 
           } 


          } 

         }  
        }, 

        series : [{ 
         //allowPointSelect : true, 
         type : type, 
         name : 'Stock Price', 
         id: 'primary', 
         data : onadata, 
         tooltip: { 
          valueDecimals: 5, 
          crosshairs: true, 
          shared: true 
         }, 
         dataGrouping : { 

          units : [ 
           [ 
            'hour', 
            [1, 2, 3, 4, 6, 8, 12] 
           ], [ 
            'day', 
            [1] 
           ], [ 
            'week', 
            [1] 
           ], [ 
            'month', 
            [1, 3, 6] 
           ], [ 
            'year', 
            [1] 
           ] 
          ] 
         } 
        }, 
        ] 
       }); 
     } 


    }); 
});

을이 내 JSfiddle입니다.

이미지를 확인하십시오. 추세선과