Is there way to align legend items horizontally?

[jqu_sjc]

Hi,

Did any one try to draw legend items in horizontal fashion? I did not
find that in legend object options. Can it be fixed via CSS? Vertical
legend sometimes draws over the chart lines and some times goes out of
the chart based on padding and chart sizes respectively. Horizontal
option would be handy at the time.

Thanks,
Bhuvan

[SvL]

You can specify the nr of clumns... And you could even place the
legend outside the graph. So, for example the options below will place
your legend in the div with id "legendBox" and has 1 column (so all
items vertically aligned)

var options = { legend: { show:true, noColumns: 1, container: $
('#legendBox') } }

[jqu_sjc]

I tried this. It didn't work for me. The legend moved from 'nw' to
'ne'.

I am trying to get all legend items into one row. So, I tried 'noRows:
1' option too. Still no change. I am using the latest dist (0.9.6).
I have the following CSS references.

<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" /
>
<link type="text/css" href="jquery-ui/css/overcast/jquery-
ui-1.7.2.custom.css" rel="Stylesheet" />

Anything else need to be added?

Bhuvan

On Nov 23, 2:09 am, SvL <stefvanliesh...@gmail.com> wrote:
> You can specify the nr of clumns... And you could even place thelegendoutside the graph. So, for example the options below will place
> yourlegendin the div with id "legendBox" and has 1 column (so all

> items vertically aligned)
>
> var options = {legend: { show:true, noColumns: 1, container: $
> ('#legendBox') } }
>
> On Nov 20, 8:47 pm, jqu_sjc <bhuvanrac...@gmail.com> wrote:
>
> > Hi,
>

> > Did any one try to drawlegenditems in horizontal fashion? I did not
> > find that inlegendobject options. Can it be fixed via CSS? Vertical
> >legendsometimes draws over the chart lines and some times goes out of

[SvL]

I'm very sorry to put you on a wrong track... I forgot I still use two
js graph code. It seems jqPlot doesn't do this indeed, probably one of
the reasons I decided to also use Flot. On this page you'll see an
example of the nrColumns changed in Flot:
http://people.iola.dk/olau/flot/examples/selection.html

sorry again, hope you didn't have a sleepless night :P

-Stef

[Bhuvan Racham]

Thanks Stef. No problem.

I wondered about that option as I did not find it in jqPlotOptions file. Then I thought I might as well ask.

I think it should be simple to add this option in jqplot also. I am going to check base js code and see if anything can be done. Chris is already fielding lot of requests.

Bhuvan

--

You received this message because you are subscribed to the Google Groups "jqplot-users" group.
To post to this group, send email to jqplot...@googlegroups.com.
To unsubscribe from this group, send email to jqplot-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jqplot-users?hl=en.

[Anish Nair]

Hi,

Set the numberRows1 inside the  rendererOptions{}

So it goes like this:  
legend: { show:true, rendererOptions: {numberRows: 1}, location: 'e', placement: 'outsideGrid'}

:Anish Nair

[CallMeLaNN]

Thanks, with the latest version, it works using the rendererOptions.

[CallMeLaNN]

Unfortunately it only works for certain charts, Pie chart can but not working in Bar chart.