Remove square label from tooltip and make its information in one line - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

Remove square label from tooltip and make its information in one line

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js 2.1</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.5.0/Chart.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  w  ww . j av a2s .  co m*/
      var ctx = document.getElementById("canvas").getContext("2d");
      var data = {
        labels: ['January', 'February', 'March'],
        datasets: [{
          data: [1, 2, 3]
        }]
      };
      var myLineChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
          showAllTooltips: true,
          tooltips: {
            custom: function(tooltip) {
              if (!tooltip) return;
              tooltip.displayColors = false;
            },
            callbacks: {
              label: function(tooltipItem, data) {
                return tooltipItem.xLabel + " :" + tooltipItem.yLabel;
              },
              title: function(tooltipItem, data) {
                return;
              }
            }
          }
        }
      });
    }

      </script> 
   </head> 
   <body> 
      <canvas id="canvas"></canvas>  
   </body>
</html>

Related Tutorials