// Code for rendering a bar chart
var data = [
{ x: 1, y: 5 },
{ x: 2, y: 8 },
{ x: 3, y: 7 }
];
var xScale = new Plottable.Scales.Category();
var yScale = new Plottable.Scales.Linear();
var plot = new Plottable.Plots.Line()
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return d.y; }, yScale)
.addDataset(new Plottable.Dataset(data))
.renderTo("svg#example");
// Initializing tooltip anchor
var tooltipAnchorSelection = plot.foreground().append("circle").attr({
r: 3,
opacity: 0
});
var tooltipAnchor = $(tooltipAnchorSelection.node());
tooltipAnchor.tooltip({
animation: false,
container: "body",
placement: "auto",
title: "text",
trigger: "manual"
});
// Setup Interaction.Pointer
var pointer = new Plottable.Interactions.Pointer();
pointer.onPointerMove(function(p) {
var closest = plot.entityNearest(p);
if (closest) {
tooltipAnchor.attr({
cx: closest.position.x,
cy: closest.position.y,
"data-original-title": "Value: " + closest.datum.y
});
tooltipAnchor.tooltip("show");
}
});
pointer.onPointerExit(function() {
tooltipAnchor.tooltip("hide");
});
pointer.attachTo(plot);
.tooltip {
/* keep tooltips from blocking interactions */
pointer-events: none;
}