CODEWITHSUNDEEP
javascriptd3.js
user6030945
user6030945

Reputation: 33

d3.js multiseries line chart tooltip issue

I have a tooltip question about the example in this link D3.JS: Multiseries line chart with mouseover tooltip In this example, the tooltips just show the the data on y axis which are Fahrenheit degrees. But in my project, I also want to see the data which is not displayed on x and y axis.

In this example, I made a change on line 84 based on the code in the link above to generate celsius (°C). How can I have the tooltips show both Fahrenheit and celsius degrees together in a single tooltip? [see fiddle][2]https://jsfiddle.net/xn1sLbf4/3/ Here I am just trying to insert a 'column' of data. In my case, 'celsius' is not something that I can calculate from the data on y-axis. It might be department name, id and etc.

Does anybody know how to do this? Any help is appreciated!

Upvotes: 3

Views: 240

Answers (1)

meetamit
meetamit

Reputation: 25177

The tooltip's text is set on lines 250-251:

d3.select(this).select('text')
  .text(y.invert(pos.y).toFixed(2));

So whatever you pass into the .text() method is what those tooltips will display. To show both temperature units, you can modify that code to something like

var fahrenheit = y.invert(pos.y);
var celsius = (fahrenheit - 32) * 5/9;
d3.select(this).select('text')
  .text(fahrenheit.toFixed(1) + "F / " + celsius.toFixed(1) + "c");

Upvotes: 3

Related Questions