JavaScript
var data = {
labels: ["-2h", "-10m", "-7m", "-2m", "-5s"],
datasets: [{
data: [12.5, 3.1, 2.3, 1.2, 8.5],
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
}, {
data: [12.5, 4.1, 3.3, 4.2, 15.5],
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
},
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var options = {
showTooltips: true,
onAnimationComplete: function () {
for (var dataIndex = 0; dataIndex < this.datasets[0].points.length; dataIndex++) {
// the following is pretty much a copy-paste from the Chart.js library
var tooltipLabels = [],
tooltipColors = [],
medianPosition = (function (index) {
// Get all the points at that particular index
var Elements = [],
dataCollection,
xPositions = [],
yPositions = [],
xMax,
yMax,
xMin,
yMin;
Chart.helpers.each(this.datasets, function (dataset) {
dataCollection = dataset.points;
if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()) {
Elements.push(dataCollection[dataIndex]);
}
});
Chart.helpers.each(Elements, function (element) {
xPositions.push(element.x);
...