Chartjs to hide the data labels on the axis but show up on hover - Javascript Chart.js

Javascript examples for Chart.js:Axis

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

Description

Chartjs to hide the data labels on the axis but show up on hover

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>ChartJS Line Chart</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> 
      <style id="compiled-css" type="text/css">

canvas { background-color : #eee;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){//w ww .j  a va2 s .  c o  m
var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
         {
            label: 'Colors',
            data: [7, 11, 5, 8, 3, 7],
            borderWidth: 1
         }
      ]
  },
  options: {
     scales: {
       xAxes: [{
        ticks: {
               display: false
        }
      }]
    }
  }
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
    }

      </script> 
   </head> 
   <body>  
      <canvas id="chartJSContainer" width="600" height="400"></canvas>   
   </body>
</html>

Related Tutorials