Question

In the chart when it start drawing main series (LTP), It draws on whole width.

Is there a way to draw it just like the selector chart at bottom?

EDIT : I want entire xAxis viewable and then add the points without auto-scaling the xAxis.

Have a look at my code

http://jsfiddle.net/S9SwB/9/

Answer 1

Build up on @wergeld’s solution here, as you see in his solution, the end of x-axis was position correctly at 5:30 but there was a suddent leap in time, this is because the ordinal property of the axis is set to true by default, which means all points are equally spaced in terms of pixels, immaterial of difference in terms of time, so the axis leaves enough room at right for just 1 point, and hence number of pixels required to add one point. On setting ordinal to false, it will allocate as much space as is needed based on time difference.
All in all, here goes your solution 🙂 http://jsfiddle.net/jugal/UP5sW/

var min = new Date().getTime();
var max = min + 50 * 500;  
//...

xAxis: {
        ordinal: false,
        max:max
    },
    series: [
        {
        name: 'Series 0',
        data: [[min, 0]]
    },
    {
        name: 'End',
        data: [[max, 0]]
    }]

More about ordinal option @ http://www.highcharts.com/stock/ref/#xAxis–ordinal & http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ordinal-false/