CODEWITHSUNDEEP
jquerytooltipgoogle-visualization
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

Google line chart overlapping tooltip

I've designed a graphing application using the google charts api. Below is an example graph I draw using the data. As you can see there are two graphs in the image. when I hover on a graph a tool tip appears with the relevant data! it's standard bt the problem is when the two graphs overlap, I can only view the tooltip of the graph that's drawn infront! how can I make the tool tip show the data from the graph that is beneath the first graph.?

enter image description here

Upvotes: 5

Views: 2911

Answers (2)

jmac
jmac

Reputation: 7128

You can set focusTarget to "category" which will highlight all series at that X point and show them in the tooltip so that even overlaps will display both data points. See more on that option here.

You can alternatively add noise to the chart to dither the results so that overlaps don't display as overlaps.

Upvotes: 4

ruedamanuel
ruedamanuel

Reputation: 1930

You can create an event listener and retrieve the values of both charts at the same time and then add them to a custom tooltip as it was suggested in the comments:

    var chart = new google.visualization.ComboChart(document.getElementById("myChart");
    var listener = google.visualization.events.addListener(chart, 'onmouseover', function (e) {
                     console.log(e);
                  });

That should help you get started.

Upvotes: 0

Related Questions