Multiple tooltips in dimple.js

Question

The current data is displayed in the form of a line chart through dimple.js. If the same value data appears for the year, the points overlap. In this case, I want to display the tooltips for all the overlapping data when I move the mouse over that point. What should I do?

Answer 1

You need to handle mouseover event of Series object like this,

mySeries.addEventHandler("mouseover", function (e){
    var xValue = e.xValue; // e.xValue returns X Axis value of hovered data point
    var yValue = e.yValue; // e.yValue returns Y Axis value of hovered data point
    // Filter your data with both xValue and yValue, to find overlapped `series` data.
});

This sample demonstrates how to override default tooltip and might be helpful for you too http://dimplejs.org/advanced_examples_viewer.html?id=advanced_custom_styling