Primefaces: Charts and position Legend


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.

Try to add this :

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

and add this inside your barChart component :