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
Compass: Generate Sprites, Plus Width/Height on Each Images in the Sprite
CSS - CSS3 Pixelate Dot Background
Free ASP.NET And/Or CSS Themes
How to Get Scale Works Cross-Browser in Center Position on Svg Elements with CSS
Prevent :After Element from Wrapping to Next Line
Less Class Name String Interpolation Not Working
How to Select an Element with 2 Classes
How to Make an Irregular <Div> Shape Using Only CSS
Set Line-Height as a Percentage Relative to the Parent Element
CSS - Increasing Size of Holder or What Ever Its Called
How to Style React-Select Options
Getting Rid of All the Rounded Corners in Twitter Bootstrap
Differencebetween CSS and SCSS
How to Listen to the End of a Bootstrap Animation