How to set x axis value as tooltip in flot charts textual data

Question

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.org/flot/examples/examples.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>


<script src="https://cdnjs.cloudflare.com/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 ?

Solution

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 comments, and see what's best in your case.

Comments

[DNS]

What tooltip plugin are you using?

[mymotherland]

@DNS i use jquery.flot.tooltip.js

[Deepak Ingole]

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

[mymotherland]

@captain i have created fiddle jsfiddle.net/mdineshkumarcs/qbXDw kindly check