Karthi Karthi - 4 years ago 323
jQuery Question

Highcharts.stockChart Range Selector (zoom) Button Position After the Chart Container

I want to place the range selector button after the chart display area. Any one suggest me how to implement that.

Current Output

Expected Output

Code Used

Highcharts.stockChart('chartcontainer', {
rangeSelector: {
selected: 1
},

title: {
text: 'AAPL Stock Price'
},

plotOptions: {
candlestick: {
color: '#00c800',
upColor: '#c80000'
}
},

series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: data,
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
}
}]
});

Answer Source

At least one way to do it is to juggle several margins and x/y-positions. The problem is that the positioning for both the navigator and the range selector do not offer very dynamic positioning options.

See this example (JSFiddle demonstration based on this demo):

chart: {
    marginTop: 20, // Close the gap where the range selector used to be
    marginBottom: 60, // Make space for the new range selector position
},

rangeSelector: {
    selected: 1,
    buttonPosition: {
        x: 0,
        y: 370 // Move the range selector down the Y-axis
    }
},

navigator: {
    top: 300 // Reposition the navigator based on the top of the chart
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download