JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="lineChart"></canvas>
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;
}
JavaScript
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;
}