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 ?

Answer 1

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 .