How do I change the style of the legend in Flot?

I have just changed my 开发者_运维问答version of Flot from 0.6 to 0.7, however, when I do this, the legend in my Flot graph changes style. Previously, I had used the "LabelClass" attribute to change the style but on reading the source for 0.7 I see that "labelClass" is no longer an option and I appear to be forced to use the "table" CSS definition that is used throughout the site that I'm working on. Because of this I can't change the site's CSS "table" definition.

Is there another good method for changing the definition of a legend or am I stuck?

Apologies in advance is this is just a newbie question

Kind Regards

It has changed names is all, the new class is legendLabel for the labels and legendColorBox for the color box.

You can see this in jquery.flot.js.

EDIT in response, it seems that the question is how do you style the whole table. Assume your flot placeholder is something like this:

<div id="foo" style="width:600px;height:300px"></div>

Then you can define CSS like this:

#foo > div.legend > table {
  border: 2px red solid;
}

See it here in action: http://jsfiddle.net/ryleyb/YkDpG/1/

Another way to style the legend is to use the jQuery .css() (http://api.jquery.com/css/) method after the chart has been plotted.

For example:

$.plot($("#chartFoo"), pieChartData, options);
$("#chartFoo div.legend table").css("border", "1px solid #888888");
$("#chartFoo div.legend table").css("background", "#ffffee");

or:

$.plot($("#chartFoo"), pieChartData, options);
$("#chartFoo div.legend table").css({ border: "1px solid #888888", background: "#ffffee" });