Hide y axis line in ChartJs - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

Hide y axis line in ChartJs

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>1. Line Chart</title> 
      <style>

.container {// w  w  w .ja  v  a2  s  .  c  o  m
   width: 300px;
   height: 220px;
   margin: 20px auto;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div class="container"> 
         <canvas id="myChart" width="300" height="220"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> 
      <script>
      var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
    options: {
      legend: {
        display: false,
      },
      scales: {
        xAxes: [{
          gridLines: {
            display: false,
          },
          ticks: {
            fontSize: 15,
            fontColor: 'lightgrey'
          }
        }],
        yAxes: [{
          gridLines: {
            drawBorder: false,
          },
          ticks: {
            beginAtZero: true,
            fontSize: 15,
            fontColor: 'lightgrey',
            maxTicksLimit: 5,
            padding: 25,
          }
        }]
      },
      tooltips: {
        backgroundColor: '#1e90ff'
      }
    },
    data: {
      labels: ['M', 'Tu', 'W', 'Th', 'F', 'Sa', 'Su'],
    datasets: [{
      data: [0, 0, 0, 11, 9, 17, 13],
      tension: 0.0,
      borderColor: 'rgb(255,190,70)',
      backgroundColor: 'rgba(0,0,0,0.0)',
      pointBackgroundColor: ['white', 'white', 'white', 'white', 'white', 'white', 'rgb(255,190,70)'],
      pointRadius: 4,
      borderWidth: 2
    }]
  }
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials