show the same yAxis start and end value with multiple data series for column chart - Javascript highcharts

Javascript examples for highcharts:Chart Value

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

Description

show the same yAxis start and end value with multiple data series 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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from  ww w  . j  a  v a2s .  com
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },
            xAxis: [{
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }],
            yAxis: [{ // Primary yAxis
                min: 0,
                max: 600,
                tickInterval: 50,
                title: {
                    text: '2012',
                    style: {
                        color: '#89A54E'
                    }
                }
            }, { // Secondary yAxis
                min: 0,
                max: 600,
                tickInterval: 50,
                title: {
                    text: '2011',
                    style: {
                        color: '#4572A7'
                    }
                },
                opposite: true
            }],
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y;
                }
            },
            series: [{
                name: 'Series 1',
                color: '#4572A7',
                type: 'column',
                yAxis: 1,
                data: [49.9, 71.5, 44, 129.2, 101.0, 119.25, 135.6, 500, 125.2, 194.1, 95.6, 54.4]
            }, {
                name: 'Series 2',
                color: '#89A54E',
                type: 'spline',
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }]
        });
    });
});

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

Related Tutorials