Multiple Axis Graph labels for column chart

Description

Demo Code

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//w  ww  .ja v a  2  s .  c  o  m
$(document).ready(function(e) {
       var perShapeGradient = {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
        };
      chart = new Highcharts.Chart({
         chart: {
            renderTo: 'GraphContainer',
            height:   275,
            marginLeft: 120,
            marginTop: 30
         },
            colors:
         [
            {
               linearGradient: perShapeGradient,
               stops:
               [
                  [0, 'rgba(186, 186, 186, 1)'],
                     [1, 'rgba(232, 232, 232, 0.8)']
               ]
            }
            ],
         title: {
            text: null
            },
         plotOptions: {
            line: {
               lineWidth: 1,
               marker: {
                  radius: 6,
                  fillColor: '#fff',
                  lineColor: '#e10019',
                  lineWidth: 1.5,
                  states:
                  {
                     hover:
                     {
                        radius: 8,
                        fillColor: '#e10019',
                        lineColor: '#fff',
                        lineWidth: 2
                     }
                  }
               }
            }
         },
         xAxis: {
            categories: ['13 May', '20 May'],
            title: 'Week Commencing'
         },
         yAxis: [{
            labels: {
               endOnTick: true,
               formatter: function() {
                  return this.value + '%';
               },
               style: {
                  color: '#e10019',
                  fontSize: 10
               }
            },
            title: {
               text: '% rated as 4 or 5',
               rotation: 270,
               offset: 75,
               style: {
                  color: '#f49fa8',
                  fontSize: 11,
                  fontWeight: 'normal'
               }
            },
            max: 100,
            opposite: true
         }, {
                linkedTo:0,
            gridLineWidth: 0,
            title: {
               text: 'Number of responses',
               style: {
                  color: '#888',
                  fontSize: 11,
                  fontWeight: 'normal'
               }
            },
            labels: {
               formatter: function()
               {
                  x = this.value.toString();
                  var pattern = /(-?\d+)(\d{3})/;
                  while (pattern.test(x))
                     x = x.replace(pattern, "$1,$2");
                  return x;
               },
               style: {
                  color: '#888',
                  fontSize: 10
               }
            }
         }],
         tooltip: {
            formatter: function() {
               var unit = {
               'Applicable': '',
               'Sentiment': '%'
               }[this.series.name];
               return 'Week Commencing ' + this.x +': '+ this.y +' '+ unit;
            }
         },
         legend: {
            enabled: false
         },
         series: [{
            name: 'Applicable',
            type: 'column',
            data: [307, 200]
         }, {
            color: '#e10019',
            name: 'Sentiment',
                type: 'line',
            data: [44.3, 20]
         }]
      });
    });
    });

      </script> 
   </head> 
   <body> 
      <div id="GraphContainer"></div>  
   </body>
</html>
Multiple Axis Graph labels for column chart - Javascript highcharts

Description

Demo Code

Related Tutorials
