Y axis on left and right - Javascript Chart.js

Javascript examples for Chart.js:Axis

  1. HOME
  2. Javascript
  3. Chart.js
  4. Axis

Description

Y axis on left and right

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Double YAxis</title> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
      <style>

body{//from  w ww . j  a  v  a2 s  .com
   background-color: #666;
}
#multiLineChart{
   background-color: lightgrey;
   border-radius: 6px;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div class="container"> 
         <br> 
         <div class="row"> 
            <div class="col-md-1"></div> 
            <div class="col-md-10"> 
               <!--       Chart.js Canvas Tag --> 
               <canvas id="multiLineChart"></canvas> 
            </div> 
            <div class="col-md-1"></div> 
         </div> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> 
      <script>
      // REF
// http://stackoverflow.com/questions/40933266/char-js-same-y-axis-on-left-and-right
var canvas = document.getElementById("multiLineChart");
var ctx = canvas.getContext('2d');
var data = {
  labels: ["January", "February", "March", "April", "May"],
  datasets: [{
    label: "Series A",
    data: [23, 32, 24, 4, 43, ],
    borderColor: "rgba(100,100,100,0.8)",
    backgroundColor: "rgba(120,120,120,0.5)"
  }]
};
var options = {
  scales: {
    yAxes: [{
      display: true,
      position: 'right',
      ticks: {
        beginAtZero: true
      }
    }, {
      display: true,
      position: 'left',
      ticks: {
        beginAtZero: true,
        max: 45,
        min: 0,
        stepSize: 5
      }
    }]
  },
  tooltips: {
    enabled: true,
    mode: 'label'
  },
  legend: {
    display: true,
  }
};
// Chart declaration:
var multiLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials