It is currently Thu Aug 16, 2018 6:37 am Advanced search

Separate xAxis for each plotting pane

Technical support for the Highcharts Stock package

Separate xAxis for each plotting pane

Postby chbian » Wed Aug 08, 2018 2:13 pm

Is there a way to create separate xAxis for each plotting pane of a multiple drag-panes plot? The two panes example(https://www.highcharts.com/stock/demo/candlestick-and-volume) plots stock prices and trading volumes. Both panes share the same xAxis. I would like to create a plot that puts price series on the top pane and the histogram of returns to the bottom. The two plotting panes, in this case, could not share xAxis.

One solution is to put an xAxis on the top of the chart. So the top/bottom pane will have xAxis on top/bottom. It only works for stock charts with two panes...
chbian
 
Posts: 5
Joined: Tue Jul 17, 2018 10:44 pm

Re: Separate xAxis for each plotting pane

Postby wojtek » Thu Aug 09, 2018 10:16 am

Hi chbian,

The example you send me use the same xAxis with dates for both plots. When you add different xAxis for the second plot then they won't be correlated.

Have you tried synchronised charts (check https://www.highcharts.com/demo/synchronized-charts)? In this example you can set data to different charts and connect them. Just set chart.panning = true and panKey as you like:

Code: Select all
chart: {
     panning: true,
     panKey: 'shift'
}


Api reference: https://api.highcharts.com/highcharts/chart.panning
Online demo: https://jsfiddle.net/wchmiel/dop7aumw/

Best regards.
wojtek
 
Posts: 131
Joined: Tue Jul 03, 2018 2:32 pm

Re: Separate xAxis for each plotting pane

Postby chbian » Thu Aug 09, 2018 2:13 pm

Hi wojtek,

This is a two xAxis case (https://jsfiddle.net/chbian/5014s8Lv/). It is modified from the example by Torstein Hønsi. It has the OHLC plot on top and a histogram chart to the bottom. Each pane has its own xAxis. Is there an easy way (hopefully easier than a full-fledged synchronised chart :)) to put the xAxis of the OHLC plot at the bottom of the plotting pane?

Chao
chbian
 
Posts: 5
Joined: Tue Jul 17, 2018 10:44 pm

Re: Separate xAxis for each plotting pane

Postby wojtek » Fri Aug 10, 2018 12:24 pm

Check this example: https://jsfiddle.net/wchmiel/se2fptL3/.

I set yAxis using height and top properties so that there is a gap under the OHLC chart. Then on the ohlc xAxis I set offset to put it in the proper position.

Api reference: https://api.highcharts.com/highcharts/xAxis.offset

Best regards.
wojtek
 
Posts: 131
Joined: Tue Jul 03, 2018 2:32 pm

Re: Separate xAxis for each plotting pane

Postby chbian » Fri Aug 10, 2018 2:52 pm

Thank you, wojtek. It works fine.
chbian
 
Posts: 5
Joined: Tue Jul 17, 2018 10:44 pm

Re: Separate xAxis for each plotting pane

Postby wojtek » Fri Aug 10, 2018 3:20 pm

You're welcome.

regards.
wojtek
 
Posts: 131
Joined: Tue Jul 03, 2018 2:32 pm


Return to Highstock Usage

Who is online

Users browsing this forum: No registered users and 0 guests