Remove grid and border from p:chart barchart

Question

I am trying to remove the grid and border in my barchart of primefaces. Please think about the new charts of primefaces. I googled a lot and only have found solutions for the old tags of primefaces but there are new ones.

<p:chart type="bar" model="#{reportServerController.horizontalBarModelG}" styleClass="chartSize" >
            <p:ajax event="itemSelect" listener="#{auftragBean.itemSelectGutachten}" update="dataTableG" />
        </p:chart>

So is there a possibility to remove the border and grid from the chart?

Answer 1

To extend the jqplot configuration you have to use the extender functionality of primefaces' chart.

In you controller you have to set for your model the property extender. For example using the primefaces showcase demo:

private BarChartModel initBarModel() {
    BarChartModel model = new BarChartModel();
    model.setExtender("chartExtender");

    ChartSeries boys = new ChartSeries();
    boys.setLabel("Boys");
    boys.set("2004", 120);
    boys.set("2005", 100);
    boys.set("2006", 44);
    boys.set("2007", 150);
    boys.set("2008", 25);

    ChartSeries girls = new ChartSeries();
    girls.setLabel("Girls");
    girls.set("2004", 52);
    girls.set("2005", 60);
    girls.set("2006", 110);
    girls.set("2007", 135);
    girls.set("2008", 120);

    model.addSeries(boys);
    model.addSeries(girls);

    return model;
}

the setExtender methos accept the name of a javascript function in which you can manipulate the jqplot configuration.

For example, to remove the grid lines you can do the following:

<h:outputScript>
    function chartExtender(){
        //this = chart widget instance
        //this.cfg = options
        this.cfg.axes.xaxis.tickOptions.showGridline = false;
        this.cfg.axes.yaxis.tickOptions.showGridline = false;
    }
</h:outputScript>

You can see here for all jqplot options

Answer 2

I think you have to override the style class of your Primefaces chart:

How do I override default PrimeFaces CSS with custom styles?

I hope this helps!