charts.js - custom event using tooltip data (line chart)

Question

Charts.js has (newly implemented, mid-2015) custom functions that fire when the tooltip would normally appear, allowing users to create custom behaviours.

For a line chart with multiple data sets, how is it possible to access the tooltip data, parse it, and manipulate the numeric value for the highlighted datapoint?

For example, it is possible to fire an alert instead of the tooltip thus:

Chart.defaults.global.customTooltips = function (tooltip) {
    alert('Hello');
}

But how does one get the data that is displayed in the tooltip, parse it, and use it?

I posted an answer that demonstrates grabbing all tooltip data, but if user hovers over a single data point how do we get the data just for the hovered point? OR, is it possible to click on a single data point and get only that data, so we know which data point was clicked?

I will accept as correct the answer that shows how to get a single (hovered or clicked) data point.

score 0 · Accepted Answer · edited May 23 '17 at 11:50

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

charts.js - custom event using tooltip data (line chart)

1 Answers1