Primefaces: Charts and Legend position

Question

I'm working on putting together a pretty basic stacked bar chart using Primefaces. The chart itself seems to build just fine. However, the legend is being placed over the chart data. I know you can move the legend to any compass ordinal (n, s, w, e, se, sw, ne, nw), but I'd actually like to move it OFF the data.

The code to get it in:

 <p:barChart id="stackedKWH" value="#{kwhSalesBeanManager.kwhSalesChart}" legendPosition="e" style="height:300px;width:800px" title="kWh Sales by Type" stacked="true" barMargin="10" min="0" max="125000000" />

And what it currently looks like. Would like to move that legend off the chart to the right.

Answer 1

Looks like you should use javascript for this purpose. something like that:

var legend = $('table.jqplot-table-legend')[0];
legend.setAttribute('style', 'position: absolute; z-index: 3; right: -100px; top: 25px;');

I tested it on this page: http://www.primefaces.org/showcase/ui/barChart.jsf

Answer 2

Try to add this :

function extLegend() 
{
    this.cfg.legend= {
        show: true,
        location: 's',
        placement: 'outsideGrid'
    };
}

and add this inside your barChart component :

 extender="extLegend"

Answer 3

Now the best solution would be defining the placemant on chart model:

...
 modelChart.setLegendPlacement(LegendPlacement.OUTSIDE);
...