Auto scroll on the graph with overflow-x - Javascript highcharts

Javascript examples for highcharts:Chart Configuration

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Configuration

Description

Auto scroll on the graph with overflow-x

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Stock Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//  w ww.  ja  v a 2 s  .  c om
    Highcharts.chart('container', {
        chart: {
            type: 'column',
            marginLeft: 150,
            panning: true
        },
        title: {
            text: 'Most popular ideas by April 2016'
        },
        subtitle: {
            text: 'Source: <a href="https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api">UserVoice</a>'
        },
        xAxis: {
            type: 'category',
            title: {
                text: null
            },
           // min: 14,
           max: 6,
            scrollbar: {
                enabled: false
            },
            tickLength: 0
        },
        yAxis: {
            min: 0,
            max: 1200,
            title: {
                text: 'Votes',
                align: 'high'
            }
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Votes',
            data: [
                ["Gantt chart", 1000],
                ["Autocalculation and plotting of trend lines", 575],
                ["Allow navigator to have multiple data series", 523],
                ["Implement dynamic font size", 427],
                ["Multiple axis alignment control", 399],
                ["Stacked area (spline etc) in irregular datetime series", 309],
                ["Adapt chart height to legend height", 278],
                ["Export charts in excel sheet", 239],
                ["Toggle legend box", 235],
                ["Venn Diagram", 203],
                ["Add ability to change Rangeselector position", 182],
                ["Draggable legend box", 157],
                ["Sankey Diagram", 149],
                ["Add Navigation bar for Y-Axis in Highstock", 144],
                ["Grouped x-axis", 143],
                ["ReactJS plugin", 137],
                ["3D surface charts", 134],
                ["Draw lines over a stock chart, for analysis purpose", 118],
                ["Data module for database tables", 118],
                ["Draggable points", 117]
            ]
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 400px; min-width: 320px; max-width: 600px; margin: 0 auto"></div> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>  
   </body>
</html>

Related Tutorials