Search code examples
reactjshighchartsstacked-chart

Stacked column in highchart(stockchart) scrollbar


In stockchart present in highchart, is it possible to show scrollbar chart same as the main chart.

existing: chart created by me required: Required chart


Solution

  • You need to show additional series in navigator by using showInNavigator property and enable stacking for the series in navigator.

    plotOptions: {
      series: {
        stacking: 'normal',
        showInNavigator: true
      }
    },
    series: [{
      data: [...]
    }, {
      data: [...]
    }, {
      data: [...]
    }],
    navigator: {
      series: {
        stacking: 'normal',
        type: 'column'
      }
    }
    

    Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4951/

    API Reference:

    https://api.highcharts.com/highstock/series.column.showInNavigator

    https://api.highcharts.com/highstock/navigator.series