I tried with following code in Flot char to draw a chart. Chart is plotting as expected but not tooltip

$(function() {

  var data = [
    ["Aug 06", 2],
    ["Aug 07", 1],
    ["Aug 08", 1.5],
    ["Aug 09", 0],
    ["Aug 10", 0],
    ["Aug 11", 0],
    ["Aug 12", 0]
  ];
  var options = {

    series: {
      lines: {
        show: true,
        lineWidth: 1,
        fill: true,
        fillColor: {
          colors: [{
            opacity: 0.5
          }, {
            opacity: 0.2
          }]
        }
      },
      points: {
        show: true,
        lineWidth: 2
      },
      shadowSize: 0
    },
    grid: {
      hoverable: true,
      clickable: true,
      tickColor: "#eeeeee",
      borderWidth: 0,
      hoverable: true,
      clickable: true
    },
    tooltip: true,
    tooltipOpts: {
      content: "Your sales for <b>%x</b> was <span>$%y</span>",
      defaultTheme: false
    },
    xaxis: {
      mode: "categories",
      tickLength: 0
    },
    yaxis: {
      min: 0
    },
    selection: {
      mode: "x"
    }
  };
  $.plot("#section-chart", [data], options);

  // Add the Flot version string to the footer

  $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});

#section-chart {
  width: 600px;
  height: 300px;
}

<link href=".css" rel="stylesheet" />
<script src=".3.1/jquery.min.js"></script>
<script src=".8.3/jquery.flot.min.js"></script>


<script src=".tooltip/0.9.0/jquery.flot.tooltip.min.js" integrity="sha512-oQJB9y5mlxC4Qp62hdJi/J1NzqiGlpprSfkxVNeosn23mVn5JA4Yn+6f26wWOWCDbV9CxgJzFfVv9DNLPmhxQg==" crossorigin="anonymous"></script>


<div id="section-chart" class="demo-placeholder"></div>

I tried with following code in Flot char to draw a chart. Chart is plotting as expected but not tooltip

$(function() {

  var data = [
    ["Aug 06", 2],
    ["Aug 07", 1],
    ["Aug 08", 1.5],
    ["Aug 09", 0],
    ["Aug 10", 0],
    ["Aug 11", 0],
    ["Aug 12", 0]
  ];
  var options = {

    series: {
      lines: {
        show: true,
        lineWidth: 1,
        fill: true,
        fillColor: {
          colors: [{
            opacity: 0.5
          }, {
            opacity: 0.2
          }]
        }
      },
      points: {
        show: true,
        lineWidth: 2
      },
      shadowSize: 0
    },
    grid: {
      hoverable: true,
      clickable: true,
      tickColor: "#eeeeee",
      borderWidth: 0,
      hoverable: true,
      clickable: true
    },
    tooltip: true,
    tooltipOpts: {
      content: "Your sales for <b>%x</b> was <span>$%y</span>",
      defaultTheme: false
    },
    xaxis: {
      mode: "categories",
      tickLength: 0
    },
    yaxis: {
      min: 0
    },
    selection: {
      mode: "x"
    }
  };
  $.plot("#section-chart", [data], options);

  // Add the Flot version string to the footer

  $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});

#section-chart {
  width: 600px;
  height: 300px;
}

<link href="http://www.flotcharts/flot/examples/examples.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>


<script src="https://cdnjs.cloudflare./ajax/libs/flot.tooltip/0.9.0/jquery.flot.tooltip.min.js" integrity="sha512-oQJB9y5mlxC4Qp62hdJi/J1NzqiGlpprSfkxVNeosn23mVn5JA4Yn+6f26wWOWCDbV9CxgJzFfVv9DNLPmhxQg==" crossorigin="anonymous"></script>


<div id="section-chart" class="demo-placeholder"></div>

When hover the values, tooltip shows "Your sales for %x was $2" instead it should shows Your sales for Aug 06 was $2 Here how should i pass x axis values as tooltip in flot chart? What i have done wrong on this. kindly advice ?

• javascript
• jquery
• flot

• What tooltip plugin are you using? – DNS Commented Aug 12, 2013 at 11:55
• @DNS i use jquery.flot.tooltip.js – mymotherland Commented Aug 12, 2013 at 12:23
• Could you please use fiddle.Your data is quite messy. Data format should be [x,y] where both x and y should be integer.What you should be doing is to use mode:"time" and returning dates via tick formatter function for x.This will do for you – Deepak Ingole Commented Aug 12, 2013 at 13:22
• @captain i have created fiddle jsfiddle/mdineshkumarcs/qbXDw kindly check – mymotherland Commented Aug 12, 2013 at 13:55

2 Answers 2

The easiest way to solve your problem is to replace the content string with a callback:

tooltipOpts : {
        content : getTooltip,
        defaultTheme : false
      },

I defined getTooltip to get your desired output:

function getTooltip(label, x, y) {
    return "Your sales for " + x + " was $" + y; 
}

It works, as you can see in the updated jsFiddle, but you may want to consider the advice of captain, in ments, and see what's best in your case.

The solution is using tooltipOpts -> content method with a callback function to properly return dynamic data to the label.

I figured out that passing a 4th argument to the callback function of the "tooltipOpts" actually gives you the whole data object from which the chart/graph is constructed from. From here, you can easily extract the X axis labels, using the second argument of this same function as the index of the label to extract.

EXAMPLE:

Data object I'm passing to the plot function:

[
    {
        data: [[1,47478],[2,24500],[3,40177],[4,10512],[5,10512],[6,10512],[7,43439]],
        points: { show: true, radius: 3},
        splines: { show: true, tension: 0.45, lineWidth: 0, fill: 0.4}
    }
],
{
    colors: ['#0cc2aa'],
    series: { shadowSize: 3 },
    xaxis: {
        show: true,
        font: { color: '#ccc' },
        position: 'bottom',
        ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']],
    },
    yaxis:{ show: true, font: { color: '#ccc' }, min:1},
    grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
    tooltip: true,
    tooltipOpts: {
        content: function(data, x, y, dataObject) {
            var XdataIndex = dataObject.dataIndex;
            var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
            return y + ' impressions for all of your posts on ' + XdataLabel;
        },
        defaultTheme: false,
        shifts: { x: 0, y: -40 }
    }
}

Chart rendered from the above data object:

As you can see on the image preview, the logic used to render the label's content dynamically form the actual data is this:

tooltipOpts: {
    content: function(data, x, y, dataObject) {
        var XdataIndex = dataObject.dataIndex;
        var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
        return y + ' impressions for all of your posts on ' + XdataLabel;
    },
    defaultTheme: false,
    shifts: { x: 0, y: -40 }
}