chart width changes when a trendline is added in highcharts

Question

I'm facing a serious problem. Whenever I try to add any trendline starting from a bit below to the top of the chart (near about 70-85 degree angle), it changes its width. But in case of vertical and horizental line I'm not facing the problem. Is there any way to prevent this?

My code is:

$(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]
                                ]
                            ]
                        }
                    },
                    ]
                });
        }


    });
});

and this is my JSfiddle.

Please check the images also.

1. Normal chart

2. Chart with trendline

Answer 1

You can also use min/max parameters or set tickPositions / tickPositioner to keep ticks always in the same postions.

Docs: http://api.highcharts.com/highcharts

Answer 2

This is normal. It is adjusting the height of the chart (not the width) to accommodate the points you are adding. It adds a little buffer to make the chart point a bit more readable.