scrollbar with large datasets for column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

scrollbar with large datasets for column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//from   w ww  .j a va 2  s .  c  o m
Highcharts.chart('container', {
  chart: {
    type: 'column',
    color: 'rgb(245,111,35)',
  },
  title: {
    text: 'Physicians By Specialty'
  },
  subtitle: {
    text: 'Source: MDL Ecosystem'
  },
  xAxis: {
    type: 'category',
    title: {
      text: null
    },
    scrollbar: {
      enabled: true
    },
    min: 0,
    max: 7,
    tickLength: 0,
    labels: {
      rotation: -60
    }
  },
  yAxis: {
    title: {
      text: 'Profiles',
      align: 'high'
    }
  },
  plotOptions: {
    series: {
      cropThreshold: 100
    },
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Totals',
    color: 'rgb(245,111,35)',
    data: [
      ["Spec1", 1000],
      ["Spec2", 1000],
      ["Spec3", 500],
      ["Spec4", 300],
      ["Spec5", 1000],
      ["Spec6", 1000],
      ["Spec26", 500],
      ["Spec27", 300],
      ["Spec28", 1000],
      ["Spec29", 1000],
      ["Spec30", 500],
      ["Spec31", 300],
      ["Spec32", 1000],
      ["Spec33", 1000],
      ["Spec34", 500],
      ["Spec35", 300],
      ["Spec36", 300],
      ["Spec37", 300],
      ["Spec38", 300],
      ["Spec39", 300],
      ["Spec40", 300],
      ["Spec41", 300],
      ["Spec42", 300],
      ["Spec43", 300],
      ["Spec44", 300],
      ["Spec45", 300],
      ["Spec46", 300],
      ["Spec47", 1000],
      ["Spec48", 1000],
      ["Spec49", 500],
      ["Spec50", 300],
      ["Spec51", 1000],
      ["Spec52", 1000],
      ["Spec53", 500],
      ["Spec54", 300],
      ["Spec55", 1000],
      ["Spec56", 1000],
      ["Spec57", 500],
      ["Spec58", 300],
      ["Spec59", 300],
      ["Spec60", 300],
      ["Spec61", 300],
      ["Spec62", 300],
      ["Spec63", 300],
      ["Spec64", 300],
      ["Spec65", 300],
      ["Spec66", 300],
      ["Spec67", 300],
      ["Spec68", 300],
      ["Spec", 300],
      ["Spec24", 1000],
      ["Spec25", 1000],
      ["Spec26", 500],
      ["Spec27", 300],
      ["Spec28", 1000],
      ["Spec29", 1000],
      ["Spec30", 500],
      ["Spec31", 300],
      ["Spec32", 1000],
      ["Spec33", 1000],
      ["Spec34", 500],
      ["Spec35", 300],
      ["Spec36", 300],
      ["Spec44", 300],
      ["Spec45", 300],
      ["Spec46", 300],
      ["Unknown", 250]
    ]
  }]
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials