jqplot pie chart legend width

Question

I'm trying to render the legend of a pie chart so that it has a fixed width, and when the labels reach that width (the div holder) to hyphenate on the next line. I tried the row option but it doesn't work very well because my data is dynamic and at times i have say 3 data sets, and each one of them gets rendered in a separate row, while at other times i have 15-20 data sets and it becomes messy.

Anyway the solution is to restrain the legend to the width of the div, that it is rendered into, yet it doesn't seem to be accepting any css alterations. I tried adding width:250px; to the "jqplot-table-legend" in jqPlot css, i also tried adding it into various places using Inspect Element in Chrome to test whether it works, but it doesn't seem to accept the new width. I also tried to hard code it into the javascript file at various places with no luck.

I'm not sure what I can add to the question in terms of code. Everything is pretty standard on the jqPlot side.

Any suggestions on how to get around this will be much appreciated.

Mike Mike · Accepted Answer · 2012-11-13T15:05:16

This seems like the quick and dirty way, but it gets the job done. I'll use the jqplot.pieRenderer.js file as the example since it's easier to read than the minified version. Open the js file and scroll down to line 568. Right under

this._elem = $(document.createElement('table'));
this._elem.addClass('jqplot-table-legend');

add

this._elem.css({width: 300});

That will stretch the table out to whatever width you need it to be. Unfortunately, it also stretches out the column with the color swatch so you'll now need to scroll down a little further until you find

td1.css({textAlign: 'center', paddingTop: rs});

change that to

td1.css({width: 16, textAlign: 'center', paddingTop: rs});

and you should be all set.

jqplot pie chart legend width

1 Answers