How to change Bar Charts Legend position in PrimeF

Question

I am developing a web application in JSF in which I am using PrimeFaces bar chart. I want to change the legend position. I verified Primefaces: Charts and Legend position in that post they use,

<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"/>

but in primeface 5.1 there is not <p:barchart/>

<p:chart type="bar" model="#{chartView.barModel}" style="height:300px"/>

My output is look like,

Expected output:

How can I achieve this? Does someone suggest me the correct way?

Answer 1

You can do it on the bean:

BarChartModel model = new BarChartModel();
model.setLegendPosition("e");
model.setLegendPlacement(LegendPlacement.OUTSIDEGRID);

Answer 2

You can still use the model.setLegendPosition("w"); in your bean. If you want more specific control you can modify the css of the legend table. The class is called table.jqplot-table-legend.

Something like this:

XHTML:

   <p:chart styleClass="barChartStyleClass" type="bar" widgetVar="barChart" model="#{playgroundController.barModel}" style="width:400px;height:300px">

    </p:chart> 

CSS:

.barChartStyleClass table.jqplot-table-legend {
    top:50px !important;
    right:50px !important;
    //more css here
}

Perhaps you can make it work without the !important, but i had no luck. But i still hope it helps :)