show label in tooltip but not in x axis for line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

show label in tooltip but not in x axis for line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>StackOverflo</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.4.0/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from   ww w .ja  v  a 2 s . c o  m*/
var linechart = document.getElementById("myChart");
var myChart = new Chart(linechart, {
    type: "line",
    data: {
        labels: ["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"],
        datasets: [{
            data: [65, 59, 80, 81, 56, 55],
            fill: true,
            lineTension: 0.2,
            backgroundColor: "rgba(209, 223, 43,0.4)",
            borderColor: "rgba(209, 223, 43,1)",
            borderCapStyle: "butt",
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: "miter",
            pointBorderColor: "rgba(209, 223, 43,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
        }]
    },
    options: {
       maintainAspectRatio: true,
        tooltips: {
            enabled:true,
      mode: "label",
      },
      hover: {
      mode: "label"
      },
      legend:{
            display:false
        },
      title: {
            display: true,
            text: "Statistics"
        },
      scales: {
            xAxes: [{
            ticks: {
                autoSkip:true,
                maxTicksLimit:3
            },
              scaleLabel: {
                display: true,
                labelString: "Months"
              }
            }],
             yAxes: [{
              scaleLabel: {
                display: true,
                labelString: "Price"
              }
            }]
        }
    }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" height="500" width="1000"></canvas>  
   </body>
</html>

Related Tutorials