Setting label for tooltip in flot based on x-axis value

Question

I have a line graph using flot. I want the tooltip to show the x-axis and y-axis values.

I am trying:

content: "Orders <b>%y</b> for <span>%x</span>",

But this shows "Orders 100 for 0" for the first point, "Orders 100 for 1" for the second and so on.

If I use:

content: "Orders <b>%y</b> for <span>"+chartData.axis[0][1]+"</span>",

Then this correctly shows the x-axis value for the first point.

But this doesn't work:

content: "Orders <b>%y</b> for <span>"+chartData.axis[%x][1]+"</span>",

It gives me:

Uncaught SyntaxError: Unexpected token %

How can I reference the value of %x within chartData.axis ?

For the first point on the graph %x = 0, for the second %x = 1. And so on — Chris, Jan 25 '14 at 18:07
Have you tried it with `chartData.axis[x][1]` (without the `%`)? — Raidri, Jan 25 '14 at 19:44

score 10 · Accepted Answer · edited May 23 '17 at 12:25

10

Here you would be better served using the function callback of the content property instead of the string formatting (and I'm guessing that's where you are going and asked your next question).

 tooltip: true,
   tooltipOpts: {
       content: function(label, xval, yval, flotItem){
           return "Orders <b>"+yval+"</b> for <span>"+chartData.axis[xval][2]+"</span>"
       },
       shifts: {
         x: -30,
         y: -50
       }
  }

Fiddle example here.

edited May 23 '17 at 12:25

Community

1
1

answered Jan 26 '14 at 14:26

Mark

106,305
20
172
230

i get chartData undefined – Jul 31 '18 at 15:14

Setting label for tooltip in flot based on x-axis value

1 Answers1