Highcharts. Как добавить пользовательскую полосу прокрутки?

Question

image with example

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

Мне нужно прокрутить и изменить размер графика.

Как я могу это сделать?

UPD: разметки

<div class="chart-box"> 

    <div id="chart-pane"> 
     <div id="chart-pays"> 
      <div class="chart-canvas"> 
       <!-- place for graph --> 
      </div> 
     </div> 
    </div> 


    <!-- my custom scrollbar --> 
    <div id="chart-scrollbar"> 
     <div class="handler ui-draggable ui-resizable"> 
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> 
      <div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div> 
     </div> 
    </div> 

</div> 

Answer 1

Вы можете настроить высокой графике Полоса прокрутки

$('#container').highcharts('StockChart', { 
scrollbar: { 
       barBackgroundColor: 'gray', 
       barBorderRadius: 7, 
       barBorderWidth: 0, 
       buttonBackgroundColor: 'gray', 
       buttonBorderWidth: 0, 
       buttonBorderRadius: 7, 
       trackBackgroundColor: 'none', 
       trackBorderWidth: 1, 
       trackBorderRadius: 8, 
       trackBorderColor: '#CCC' 
      }, 
} 

refer here