Add scroll to bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

Add scroll to bar 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" src="https://code.jquery.com/jquery-1.6.4.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//  ww w.  ja va2 s.c  om
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
    chart : {
               height : 157,
               renderTo: 'container'
            },
            title : {
               text : '',
                x: -20 //center
            },
            subtitle : {
               text : ''
            },
            xAxis : {
               min : 0,
               max : 3,
               categories : ["Emirates Telecom Corp Etisalat", "MTN Cameroon Ltd", "Bouygues Telecom", "Orange France", "SFR", "Airtel Burkina Faso", "Airtel Congo", "Airtel Niger", "Etisalat Benin S.A", "Togo Telecom", "Airtel DR Congo", "Sentel GSM S.A.", "Telefonica Moviles Espana S.A.", "Orange Cameroun S.A.", "Airtel Communications (Ghana) Limited", "MTN Nigeria Communications Limited", "Libercom", "Cell C (Pty) Ltd", "Vodacom Group Pty Ltd.", "Orange Centrafrique", "Sonatel", "MTN Cote d Ivoire S.A.", "Ethiopian Telecommunications Corporation", "Airtel Tchad", "Spacetel Benin", "Airtel Kenya", "Swisscom (Switzerland) Ltd", "Mauritel Mobiles", "Orange Mali SA", "Orange CI", "Globacom Ltd.", "Airtel Tanzania", "Telecel Niger SA", "MIC 2", "Airtel Uganda", "Airtel (SL) Limited", "Airtel Malawi", "Airtel Madagascar", "Belgacom Mobile", "Mahanagar Telephone Nigam Ltd. Delhi", "ATM MOBILIS", "Cellcom Israel Ltd", "Onatel", "Airtel Rwanda Limited", "OASIS SPRL", "Orascom Telecom Algerie Spa", "Etisalat Misr", "Ghana Telecommunications Company Ltd", "UNITEL S.a.r.l.", "Orascom Telecom Tunisie", "StarHub Mobile Pte Ltd", "Bharti Airtel Ltd. Delhi", "Vodafone Omnitel N.V.", "Scancom Ltd", "Telecel Centrafrique", "Singapore Telecom Mobile Pte Ltd"],
                    labels: {
                      enabled: true,
                      formatter: function() {
                          return "<span title='"+this.value+"'>" + ((this.value.toString().length > 8) ?(this.value.toString().substring(0,5) + '...'):this.value) + '</span>';
                      },
                      useHTML: true
               }
            },
            plotOptions: {
                   column: {
                       pointPadding: 0.2,
                       borderWidth: 0
                   }
               },
            credits : {
               enabled : false
            },
            series : [ {
               showInLegend : false,
               type : 'column',
                    data : [{x: 0, y: 210}, 126, 96, 70, 46, 38, 35, 34, 33, 30, 25, 23, 23, 21, 16, 14, 14, 12, 12, 12, 11, 8, 8, 7, 6, 5, 5, 5, 4, 4, 4, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
            } ],
            scrollbar: {
               enabled: true,
                 height: 11
             },
            colors : [ '#5dadb2' ]
});
    });

      </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" style="min-width: 600px; height: 400px; margin: 0 auto" align="right"></div>  
   </body>
</html>

Related Tutorials