labelFomatter of legend is not working

[nguyen dang Thanh]

Hi guys,

I'm using flot to graph pie chart

I want to customize my legend like this : 

                                                legend: {

show: true,

labelFormatter: function(label, series) {

return '<div class="labelFormatter">'+label+'</div>';

           },

},

But, maybe the system doesn't compile above html code (view result picture)

Thanks for reading

[nguyen dang Thanh]

upppppp

[Ced]

The following example works fine.
http://jsfiddle.net/G4tAK/

[nguyen dang Thanh]

Hi Ced

Thanks for your supporting. I realized that i imported "jquery.flot.legendoncanvas.js" in my program. When i remove it, the legend display properly

From here, i got aother issue, in my program, i want to customize both label in pie and label of legend. But maybe only one is applied - label for legend, and label for pie is the same with label for legend

Please have a look for my code and my result (picture)

Can you help me

[Ced]

In the pie documentation, it states:
formatter: This function specifies how the positioned labels should be formatted, and is applied after the legend's labelFormatter function.

However, when inspecting the label you would find the following:

<div class="label-formatter" style="color:white"> <!-- pie label format -->
  <div class="label-formatter" style="color:red">Label</div> <!-- legend format -->
</div>

The color style from the legend is overriding the color style from the label. 

The jsfiddle sample demonstrates this behavior.  It also demonstrates the .pieLabel CSS style being overridden.  I only mention this because the documentation also lists this as a way to style labels.

I would suggest that this is a bug, or at least that the pie documentation is not accurately worded.  The label style is being applied before the legend style, not after.
I suggest creating a new issue and see how flot's maintainer responds.

In the meantime, I think you can modify jquery.flot.pie.js.  In the drawLabel function, modify this code:

if (lf) {
    text = lf(slice.label, slice);
} else {
    text = slice.label;
}

if (plf) {
    text = plf(text, slice);
}

Change it to this:

text = slice.label;

// Apply the pie formatter

if (plf) {
    text = plf(text, slice);
}

// Apply the labelFormatter, you can leave this out completely if you don't want any style from the legend
if (lf) {
    text = lf(slice.label, slice);
}

[nguyen dang Thanh]

Thanks Ced, i need more time to assert your solution

But, at this time, if i remove the  "jquery.flot.legendoncanvas.js" , my legend will not be contained in canvas. So when i export my chart from canvas to image, the legend will not appear :(

My source problem is when the label is too long, the legend will overlap on my pie chart(see the picture) 

I can fix it by set the width of container, but this way seems do not perfect

I also hardcode to set CSS for  ".legendLabel" of "<td>" tag (legend) to set width, overflow but it not work

One more time, thank you very much