Chartjs-Charts.js – custom event using tooltip data (line chart)

by

0👍

✅

Here is how you define the custom tooltip function:

Chart.defaults.global.customTooltips = function (tooltip) {}

This fires anytime a tooltip would fire. (Note that tooltips do not identify hovering over an individual datapoint. Instead, they return the entire vertical series.)

The tooltips object, contains these properties for each hovered (vertical) series:

  • title: x-axis label (vertical) e.g. “March”
  • labels: all data points (vertical) e.g. [29,86]

Further, it is possible to access the dataset for the hovered series like this:

  • datasets[0]: first series (horizontal) e.g. [65, 59, 80, 81, 56, 55, 40]
  • data.datasets[1].label: label for 2nd horizontal data series

Below is an example that extracts this data as you move the mouse:

jsFiddle Demo

HTML:

<div class="panel panel-success">
    <div id="rpt"></div>
    <div class="panel-heading">
        <div id="i">
            Change purple series: 
            <input id="ii" type="text" value="99"/> 
            <button id="ib">Update</button>
        </div>
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        <canvas id="myChart" width="600" height="400"></canvas>
    </div>
</div>

javascript/jQuery:

//Update 2nd datapoint, purple series
$('#ib').click(function(){
    tmp = $('#ii').val();
    myLineChart.datasets[0].points[2].value = tmp;
    myLineChart.update();
    $('#ii').val( ~~(Math.random() * 80) + 20 ); //gen new number
});

//Custom Tooltip Function - try uncommenting various alerts
Chart.defaults.global.customTooltips = function (tooltip) {
    if (tooltip.y){
        tt = tooltip.title;
        ll = tooltip.labels;
        no = tooltip.labels.length;
        rpt = 'Title: ' +tt+ ' - Data: ';
        for (i=0;i<no;i++){
//            alert( data.datasets[i].strokeColor );
//            alert( data.datasets.length );
//            alert( data.datasets[i].label );
//            alert( tooltip.labels[i] );
            rpt += data.datasets[i].label +': '+ ll[i] +'; ';
        }
        alert(rpt);
        //alert('Title: ' +tt+ ' - Data: ' +ll );
        //alert( JSON.stringify(tooltip) );
        //$('#rpt').html( JSON.stringify(tooltip) );
    }
}

//Chart data
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "Purple Cows",
        fillColor: "rgba(220,20,20,0.2)",
        strokeColor: "purple",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }, {
        label: "Red Heifers",
        fillColor: "rgba(151,187,205,0.9)",
        strokeColor: "red",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }]
};

//Chart options
var options = {
    animation: false,
    scaleOverride: true,
    scaleSteps: 3,
    scaleStepWidth: 30,
    scaleStartValue: 10,

    responsive: true,
    maintainAspectRatio: false,
    scaleShowGridLines : true,
    scaleGridLineColor : "rgba(0,0,0,.05)",
    scaleGridLineWidth : 1,
    scaleShowHorizontalLines: true,
    scaleShowVerticalLines: true,
    bezierCurve : false,
    bezierCurveTension : 0.4,
    pointDot : true,
    pointDotRadius : 3,
    pointDotStrokeWidth : 1,
    pointHitDetectionRadius : 20,
    datasetStroke : true,
    datasetStrokeWidth : 2,
    datasetFill : false
}

//Create the chart, based on above data
var ctx = $("#myChart").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);

Sources:

Detecting hover events over parts of a chart using Chart.js

Leave a comment