column Chart with Two Axis Scaling - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

column Chart with Two Axis Scaling

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Draggable Points</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script> 
      <script type="text/javascript">
    $(function(){/*www .  j a  va  2  s .  com*/
var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    zoomType: 'xy'
  },
  xAxis: [{
    categories: ["one", "two"],
    gridLineWidth: 0,
    lineWidth: 1
  }],
  yAxis: [{ // columns
    labels: {
      format: '{value}'
    },
    title: {
      text: ''
    },
    gridLineWidth: 0
  }, { // splines
    title: {
      text: ''
    },
    linkedTo: 0, // Same scale as first y-axis
    labels: {
      enabled: false
    },
    gridLineWidth: 0
  }],
  plotOptions: {
    series: {
      animation: false
    }
  },
  series: [{
    name: "Vals 0",
    type: 'column',
    yAxis: 0,
    data: [10, 200]
  }, {
    name: "Vals 1",
    type: 'spline',
    yAxis: 1,
    data: [4, 6]
  }, {
    name: "Vals 2",
    type: 'spline',
    yAxis: 1,
    data: [3, 1]
  }]
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials