Chart Js Template

Base for Chart JS

HTML

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>

CSS

#chartjs-tooltip {
     opacity: 0;
     position: absolute;
     background: rgba(0, 0, 0, .7);
     color: white;
     padding: 3px;
     border-radius: 3px;
     -webkit-transition: all .1s ease;
     transition: all .1s ease;
     pointer-events: none;
     -webkit-transform: translate(-50%, -120%);
     transform: translate(-50%, -120%);
 }

JavaScript

var ctx = $("#myChart").get(0).getContext("2d");

var data = {
    labels: ["Jan\bua\bry", "February", "Mar\bch", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }]
};

    var myLineChart = new Chart(ctx).Bar(data, {
        customTooltips: function (tooltip) {
            var tooltipEl = $('#chartjs-tooltip');
    
            if (!tooltip) {
                tooltipEl.css({
                    opacity: 0
                });
                return;
            }
    
            // split out the label and value and make your own tooltip here
            var parts = tooltip.text.split(":");
            var re = new RegExp('\b', 'g');
            var innerHtml = '<span>' + parts[0].trim().replace(re, '<br/>') + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
            tooltipEl.html(innerHtml);
    
            tooltipEl.css({
                opacity: 1,
                left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
                top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
                fontFamily: tooltip.fontFamily,
                fontSize: tooltip.fontSize,
                fontStyle: tooltip.fontStyle,
            });
        }
    });