Format Highcharts xAxis for stock data

Question

I have gone through Highcharts options needed to be set for xAxis properties to format time label but with no luck understanding how exactly this works for this scenario.

I have dynamic data retrieved for a stock during the day (intraday) which I need to display as data is retrieved starting at 9:30 and ending at 17:00 every day, I need to display labels showing 30 minutes interval as in the following: 9:30..10:00..10:30..etc but I can't seem to get this working with data blocks (pointers) received every 5 minutes.

The other problem is that I need to display data without spanning to the full width of the chart, for example at 10:00 all I have is 6 bars (5 minutes each) but what it does is that it fills the chart with large 6 bars instead of locking them to their time frame:

What I need to do is to display these bars within the 9:30-10:00 area and leave the rest to be filled as I receive more data just like this: I would appreciate any help on how to get this done. I know a Stock chart type is in the work, but I need to use the OHLC type for now urgently.

Many thanks.

Answer 1

Not sure if this is the type of thing your thinking of.

But with highcharts (If this is the thing your using) can do steps. Which in turn, only show the label every x intervals.

I have created a demo of how you may approach your project.

//

http://jsfiddle.net/BAV4X/69/

//

Couple issues with it, but somthing to start with, This isnt traditional "start / end" day values, rather "high/low" , high is calculated by the difference , you can see when the tooltip is created and the corresponding values.

Keep in mind you dont need to use "categories" but instead [x,y] co-ordinates in the data series.

EDIT:

Apparently you can set the x-axis property "MAX" to allow full view of the chart, rather than it scaling.

This is fairly confusing as they have a "pointStart" to indicate the beginning x-axis, but no "pointEnd".