How to show scale labels and set min/max for yAxes for line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

How to show scale labels and set min/max for yAxes for line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Line Chart</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from w ww . j a  v a2 s  .c  o m
var labels = ["250", "500", "750", "1000", "1500", "2000", "3000", "4000", "6000", "8000", "10000"];
var dataRight = [35, 50, 50, 55, 60, 65, 55, 80, 70, 65, 55];
var dataLeft = [35, 55, 50, 50, 55, 60, 65, 70, 75, 60, 55];
var data = {
  labels: labels,
  datasets: [{
    label: "Right",
    fill: false,
    backgroundColor: "black",
    borderColor: "red",
    pointBorderColor: "purple",
    pointBackgroundColor: "purple",
    pointBorderWidth: 1,
    pointHoverRadius: 4,
    pointHoverBackgroundColor: "purple",
    pointHoverBorderColor: "purple",
    pointHoverBorderWidth: 2,
    tension: 0,
    data: dataRight,
  }, {
    label: "Left",
    fill: false,
    backgroundColor: "black",
    borderColor: "blue",
    pointBorderColor: "purple",
    pointBackgroundColor: "purple",
    pointBorderWidth: 1,
    pointHoverRadius: 4,
    pointHoverBackgroundColor: "purple",
    pointHoverBorderColor: "purple",
    pointHoverBorderWidth: 2,
    tension: 0,
    data: dataLeft,
  }]
};
var context = $('#audiogram').get(0).getContext('2d');
var chart = new Chart(context, {
  type: 'line',
  data: data,
  options: {
    scales: {
      xAxes: [{
        position: "top",
        scaleLabel: {
          display: true,
          labelString: "Frequency (Hz)",
          fontFamily: "Montserrat",
          fontColor: "black",
        },
        ticks: {
          fontFamily: "Montserrat",
        }
      }],
      yAxes: [{
        position: "left",
        scaleLabel: {
          display: true,
          labelString: "dB",
          fontFamily: "Montserrat",
          fontColor: "black",
        },
        ticks: {
          min: -10,
          max: 110,
          stepSize: 10,
          reverse: true,
        },
      }],
    },
  }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="audiogram" width="700" height="600"></canvas>  
   </body>
</html>

Related Tutorials