primefaces chart x axis [duplicate] - jsf

Question

This question already has an answer here:
Primefaces 5 Rotated Axis Tick Labels
(1 answer)
Closed 7 years ago.
You can see the problem from this site.
Here is the code of my index.html file:
<h:head></h:head>
<h:form>
<p:outputLabel value="Primefaces Tutorial"></p:outputLabel>
<p:chart type="bar" model="#{viewEmployeesManagedBean.barModel}" style="height:500px" xaxisAngle="90" />
</h:form>
</html>
I create a chart in primefaces java. xAxis overlaps. I use xaxisAngle. But it seems it makes no difference. How do I fix it?
I want vertical xAxis labels. What should I do?

Answer 1

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
}
}
};
}
ManagedBean
barModel.setExtender("customExtender");