primefaces barChart costum x-axes

integer, java, primefaces, xhtml

Solution

Try this (not tested):

<p:barChart extender="ext" id="horizontal" value="#{chartBean.categoryModel}" legendPosition="se" style="height:300px"  
    title="Horizontal Bar Chart" orientation="horizontal"/>

In you js add this

function ext() {
   this.cfg.seriesDefaults = { 
       useSeriesColor: true, 
       min: 0, 
       max: 200, 
       tickInterval: 20, 
       tickOptions: { 
           formatString: '%d' 
       } 
   };
}

or this x axis only :

function ext() {
   this.cfg.axes = {
       xaxis:
       {
           tickInterval: 20,
           tickOptions: { 
               formatString: '%d' 
           } 
       }
   };
}

You can try playing with `tickInterval`...

Straight from the PrimeFaces Userguide

Extender

Charts provide high level access to commonly used jqplot options however there are many more customization options available in jqplot. Extender feature provide access to low level apis to do advanced customization by enhancing this.cfg object, here is an example to increase shadow depth of the line series;

<p:lineChart value="#{bean.model}" extender="ext" />


function ext() {
    //this = chart widget instance
    //this.cfg = options
    this.cfg.seriesDefaults = {
        shadowDepth: 5
    };
}

Refer to jqPlot docs for the documentation of available options; http://www.jqplot.com/docs/files/jqPlotOptions-txt.html Converter

Problem

Original source