Tooltip with unicode Symbol - Javascript Chart.js

Javascript examples for Chart.js:Chart Tooltip

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

Description

Tooltip with unicode Symbol

Demo Code

ResultView the demo in separate window 

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

@font-face {
   font-family: 'FontAwesome';
   src: url('https://rawgit.com/components/font-awesome/master/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('https://rawgit.com/components/font-awesome/master/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('https://rawgit.com/components/font-awesome/master/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('https://rawgit.com/components/font-awesome/master/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('https://rawgit.com/components/font-awesome/master/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){/*  w  w w  .j a  v  a2 s  .  co m*/
var lineData = {
  labels: ["Jan", "Feb", "March", "April", "May", "June"],
  datasets: [{
    fillColor: "rgba(255,255,255,0)",
    strokeColor: "rgba(145,145,145,1)",
    pointColor: "rgba(145,145,145,0)",
    pointStrokeColor: "rgba(145,145,145,0)",
    data: [6900000, 4880000, 9900000, 480000, 1000000, 5000]
  }]
}
var ctx = document.getElementById("lineChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineData, {
  tooltipFontFamily: "'FontAwesome'",
  tooltipTemplate: function (tooltip) {
    return "\uf156 " + numConversion(tooltip.value);
  }
});
function numConversion(val) {
  if (val >= 10000000) val = (val / 10000000).toFixed(2) + ' Cr';
  else if (val >= 100000) val = (val / 100000).toFixed(2) + ' Lac';
  else if (val >= 1000) val = (val / 1000).toFixed(2) + ' K';
  return val;
}
    }

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

Related Tutorials