Highcharts.stockChart Range Selector (zoom) Позиция кнопки после контейнера диаграммы

Question

Я хочу поместить кнопку выбора диапазона после области отображения диаграммы. Любой предлагал мне, как это реализовать.

Current Output

Expected Output

Код Используется

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 1

По крайней мере, один из способов сделать это, чтобы жонглировать несколько полей и х/у-позиции. Проблема в том, что позиционирование как для навигатора, так и для селектора диапазонов не предлагает очень динамических параметров позиционирования.

Смотрите этот пример (JSFiddle demonstration основанный на 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 
}