[Chartjs]-Manually display tooltip Chart.js

by

0👍

Check this 

$(document).ready(function(){
    var tooltipActivated = undefined;
    if (confirm('Enable tooltips?')) {
        tooltipActivated = true;
    } else {
        tooltipActivated = false;
    }

    var data = {
        labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
        datasets: [{
            data: [10, 20, 10, 10, 40, 50, 70, 70, 80, 90, 90, 90]
        }]
    };

    var ctx = document.getElementById("LineWithLine").getContext("2d");
    Chart.defaults.global.responsive = true;

    Chart.defaults.global.showTooltips = tooltipActivated;

    Chart.types.Line.extend({
        name: "LineWithLine",
        draw: function () {
            Chart.types.Line.prototype.draw.apply(this, arguments);

            var point = this.datasets[0].points[this.options.lineAtIndex]
            var scale = this.scale

            // draw line
            this.chart.ctx.beginPath();
            this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
            this.chart.ctx.strokeStyle = '#ff0000';
            this.chart.ctx.setLineDash([1]);
            this.chart.ctx.lineTo(point.x, scale.endPoint);
            this.chart.ctx.stroke();

            // write TODAY
            this.chart.ctx.textAlign = 'center';
            this.chart.ctx.font="12px Arial";
            this.chart.ctx.fillText("INTEGRATION", point.x, scale.startPoint + 12);
        }
    });


    new Chart(ctx).LineWithLine(data, {
        datasetFill : false,
        bezierCurve: false,
        lineAtIndex: 3,
        scaleOverride:true,
        scaleSteps:10,
        scaleStartValue:0,
        scaleStepWidth:10,
        scaleLabel: function (valuePayload) {
            return Number(valuePayload.value).toFixed(0).replace('.',',') + '%';
        }
    });

});

HTML 

<canvas id="LineWithLine" width="400" height="300"></canvas>

Leave a comment