Simple HTML5 Charts using the canvas element chartjs.org
This adds a mouseover and mouseout event to the data points in a line graph (events for all graphs may follow shortly). I implemented it because I needed to add tooltips for the data points, but you can use the event to do whatever you like.
To hook into the events, just specify a mouseover and mouseout event handler for your dataset. This works for browser mouse events as well as mobile touch events.
var data = {
labels : labels,
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : values,
mouseover: function(data) {
// data returns details about the point hovered, such as x and y position and index, as
// well as details about the hover event in data.event
// You can do whatever you like here, but here is a sample implementation of a tooltip
var active_value = values[data.point.dataPointIndex];
var active_date = labels[data.point.dataPointIndex];
// For details about where this tooltip came from, read below
tooltip.html(active_date + " - " + active_value).css("position", "absolute").css("left", data.point.x-17).css("top", data.point.y-55).css("display", 'block');
},
mouseout: function (data) {
// Hide the tooltip
tooltip.html("").css("display", "none");
}
}
]
};
var ctx = document.getElementById("myCanvasElement").getContext("2d");
var chart = new Chart(ctx).Line(data);As you can see above, we can easily add an HTML tooltip to the data point by using the x and y position of the point hovered. Above, I offset the tooltip by a few pixels, position it absolutely, and format using plain old CSS/HTML. The absolute position works because I wrap my canvas in a relative div and put the tooltip as a sibling to the canvas:
<div style="position: relative;">
<canvas id="myCanvasElement" width="400" height="400"></canvas>
<div id="tooltip"></div>
</div>Make your tooltips as fancy as you like now! My implementation:
You can find documentation at chartjs.org/docs.
Chart.js was taken down on the 19th March. It is now back online for good and IS available under MIT license.
Chart.js is available under the [MIT license] (http://opensource.org/licenses/MIT).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent