Tickformatter not performing as expected in latest version of Flot

Question

In our previous version of Flot, the following tickformatter function worked fine. It displayed the value and used the class correctly.

yaxis: {
     tickFormatter: function(v, axis) {
        return "<span class='axisLabel'>" + v + "%</span>";
     }

In the latest version (v. 0.7) it renders the tags literally so next to the graph I see a something like <span class='axisLabel'>50%</span> where the y axis tick labels should be. I should only be seeing a list of percentages.

I've done as much debugging as I can but haven't found out what is causing this. Any ideas would be appreciated.

Answer 1

This is due to a recent "improvement" in how the labels are treated, I think. From README.md in the development version:

Axis labels are now drawn with canvas text with some parsing to support newlines. This solves various issues but also means that they no longer support HTML markup, can be accessed as DOM elements or styled directly with CSS.

More specifically, it seems that

function insertAxisLabels() {...}

was replaced by

function drawAxisLabels(){...}

at some point. The former used to place axis labels as a bunch of <div> elements, as follows:

<div class="tickLabels" style="font-size:smaller">
  <div class="xAxis x1Axis" style="color:#545454">
    <div class="tickLabel" style="position:absolute;text-align:center;left:-14px;top:284px;width:75px"><em>0</em></div>
    [... div elements for other labels...]  
  </div>
</div>

That allowed one to use html code in the tickFormatter. In the latest version, all this is gone, and the labels are added to the canvas directly via

ctx.fillText(your_label, x, y);

No html formatting tags therefore work anymore. Things that used to be simple, like styling the tick labels or turning them into links, are now less straightforward. Maybe flot developers can shed some light on what is the best way to achieve the same functionality in the new version.

I am using flot mostly for barcharts. One (ugly) workaround that seems to work for me is to replace the entire drawAxisLabels function in the newest jquery.flot.js by insertAxisLabels function from the stable version (after renaming it to drawAxisLabels). I additionally have to set manually labelWidth in xaxis options of my plots since otherwise the width of the plots is calculated incorrectly.

Answer 2

function formatter(val, axis) {
    return "<span style='font-weight: bold'>" +  val / 1000000 + "m</span>"; 
}

var usersData = { color: "#00FF55", data: [[1, 900000], [2, 926000], [3, 959000], [4, 1056000], [5, 1242300]] };

$(document).ready(function() {
    $.plot($("#UserGraph"), [usersData], { xaxis: { ticks: [] }, yaxis: { tickFormatter: formatter } });
});

I could remove the style and the numbers go back to normal non-bold numbers.