relocating legend of flot plot

Question

I'm using flot as a plotting javascript utility. Here is the sample I'm using which allows toggle... https://github.com/flot/flot/blob/master/examples/series-toggle/index.html

What I want to achieve is to move the legend to the right side of the plot as having several curves causes the legend to grow big and block the view. I tried the "aboveData" option as the api suggested:

$.plot("#placeholder", data, {
                    yaxis: {
                        min: 0
                    },
                    xaxis: {
                        tickDecimals: 0
                    },grid: {show:true, aboveData:false},
                });

It did not do anything. Then I tried changing the css to add a "left" property to the table:

.legend table {
    border-spacing: 5px;
    left:800px;
}

which does move the legend table to right but there is an opaque white div container left behind. Any idea how to remove it?

Answer 1

You method kinda works if you use the parent legend div instead of the table:

.legend {
    position: absolute;
    left:800px;
}

This is probably not the best way to achieve your goals though. flot provides the ability to relocate the legend to a container (div) of your choice. So to put the legend right of the plot, I'd do:

<div id="flotGraph" style="width: 400px; height: 400px; float: left"></div>
<div id="legendContainer" style="float: left"></div>

And then use the legend container property:

    $.plot("#placeholder", data, {
        yaxis: {
            min: 0
        },
        xaxis: {
            tickDecimals: 0
        },
        legend: {
            container: $('#legendContainer')
         }
      });

Here's an example .