JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/31595946/charts-js-custom-event-using-tooltip-data-line-chart/31595954#31595954

HTML

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<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>

CSS

div{position:relative;}
#myChart {margin:auto; width:600px;}
#i {position:absolute;top:5px;right:20px;}
#ii{height:25px;width:50px;font-size:15px;padding:5px;border:none;}
#rpt{width:100%;background:wheat;}
#rpt_disabled4now{border:1px solid orange;padding:10px;}

JavaScript

/*
http://stackoverflow.com/questions/31595946/charts-js-custom-event-using-tooltip-data-line-chart
*/

//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: 9,
    scaleStepWidth: 10,
    scaleStartValue: 10,

   ...