How to enable Highcharts scrollbar?

前端 未结 3 699
名媛妹妹
名媛妹妹 2020-12-18 00:55

I tried doing the

scrollbar: {
    enabled: true
}

But it didnt work.

I tried using the highcharts.js that comes with highstocks..

相关标签:
3条回答
  • 2020-12-18 01:20

    A similar question has already been answer here.

    You can refer to this: How to enable scrollbars in highcharts

    var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        min: 6
    },
    
    legend: {
        verticalAlign: 'top',
        y: 100,
        align: 'right'
    },
    
    scrollbar: {
        enabled: true
    },
    
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
    });
    
    0 讨论(0)
  • 2020-12-18 01:37

    If your code still doesn't work, you could try changing this :

    <script type="text/javascript" src="js/highcharts.js"></script>
    

    with this :

    <script type="text/javascript" src="https://code.highcharts.com/stock/highstock.js"></script>
    

    and you can add this :

    scrollbar: {
        enabled: true
    },
    

    finally, you can add this for how many data points you want to view at a time, example " min: 6 " :

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        min: 6   <!-- LOOK at this -->
    },
    
    0 讨论(0)
  • 2020-12-18 01:47

    At the time of this answer, scrollbar can be added via highstock js. I managed to implement an elegant and simple scrollbar solution to my column chart, using only highcharts js, without highstock, as follows:

    chart: {
       type: 'column',
       scrollablePlotArea: {
       minWidth: {{ count($period_interval_categories) * 70}},
            // nr of interval data x (40 + 30) where 40 are column width pixels and
            // 30 is additional distancing between columns;
            // Increase spacing pixels if needed
       scrollPositionX: 1
       }
    },
    plotOptions: {
       column: {
           stacking: 'normal',
           pointWidth: 40, // column width in pixels
           dataLabels: {
               // enabled: true
           }
        }
    },
    

    where $period_interval_categories represents in my chart the period on x axis consisting of days, weeks, months, etc.

    0 讨论(0)
提交回复
热议问题