Primefaces 5 Rotated Axis Tick Labels

Primefaces 5 Rotated Axis Tick Labels

You can make this in the model. (http://www.primefaces.org/docs/api/5.0/org/primefaces/model/chart/BarChartModel.html)

 Axis xAxis = barModel.getAxis(AxisType.X);
xAxis.setTickAngle(-30);

Primefaces BarChart XAXIS Tick Labels Changed After Rotation

You don't need to set tickRenderer: $.jqplot.CanvasAxisTickRenderer or any extender for rotation.

For PrimeFaces versions earlier than 5.0, use xaxisAngle attribute on your component like;

xaxisAngle="-50" like:

<p:barChart id="basic" value="#{chartBean.categoryModel}" xaxisAngle="60" 
title="Basic Bar Chart" min="0" max="200" style="height:300px"/>

For newer versions see:

  • Primefaces 5 Rotated Axis Tick Labels

primefaces chart x axis

The duplicate refers to it doing in the model. You can however also do it in javascript but you need to use the extender functionality. An example of how to use this in this case is

JavaScript:

function customExtender() { this.cfg.axes = {  xaxis : {   renderer : $.jqplot.DateAxisRenderer,   rendererOptions : {    tickRenderer : $.jqplot.CanvasAxisTickRenderer   },   tickOptions : {    formatString : '%b %#d, %H:%M:%S',    angle : 60   }  },  yaxis : {   rendererOptions : {    tickRenderer : $.jqplot.CanvasAxisTickRenderer   },   tickOptions : {    fontSize : '10pt',    fontFamily : 'Tahoma',    angle : 30   }
}
};}

primefaces barchart X axis decimal tick labels with single decimal digit

You should use the extender of the <p:barChart , like this:

<p:barChart value="#{myBean.myModel}" widgetVar="myBarChart" extender="my_ext"/>

<script type="text/javascript">
function my_ext() {
this.cfg.axes.xaxis.tickOptions = {
formatString : '%#.1f'
};
}
</script>

How to add the label of a Primefaces chart?

Try to use

xaxisLabel="Year" yaxisLabel="Populations"

 <p:lineChart id="chart" value="#{chartBean.linearModel}" xaxisAngle="-90" xaxisLabel="Year" yaxisLabel="Populations">
<f:convertDateTime pattern="d-M-yyyy"/>
</p:lineChart>

Why do y-axis series labels change when I specify x-axis options?

After much more investigation, I have found the solution, although I'm not sure if it's an issue with PrimeFaces or jqplot: the xaxis ticks need re-setting again after customising the configuration ....

this.cfg.axes.yaxis.ticks = this.cfg.categories;


Related Topics



Leave a reply



Submit