Hi all,
When chart.setExtender("skinBar") set for a bar chart, then xAxis.setTickAngle(30) has no effect on bar chart. Otherwise it works. Anyone knows a workaround for this problem?
Thank you in advance.
Axis tick angle is not working on bar chart
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
Hi below is the java code where bar chart model is created
This the facelet decrlation for the bar chart
PS: I could reproduce the same issue with the demo ultima application v.1.1.2.
Thank you.
Code: Select all
educationLevelStatusBarModel = new BarChartModel();
Axis xAxis = educationLevelStatusBarModel.getAxis(AxisType.X);
xAxis.setTickAngle(30);
// when below line is commented out, tick ange works for the x axis
educationLevelStatusBarModel.setExtender("skinBar");
Code: Select all
<div class="card">
<p:chart type="bar"
model="#{hrResourcesDashboardView.educationLevelStatusBarModel}"
responsive="true"/>
</div>
Thank you.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot for the sample code. Please try;
Best Regards,
Code: Select all
//Bean.java
educationLevelStatusBarModel = new BarChartModel();
Axis xAxis = educationLevelStatusBarModel.getAxis(AxisType.X);
xAxis.setTickAngle(30);
// when below line is commented out, tick ange works for the x axis
educationLevelStatusBarModel.setExtender("skinBar");
//XHTML
function skinBar() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#4CAF50', '#FFC107'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults.borderWidth = 0.1;
this.cfg.axesDefaults.borderColor = 'bdbdbd';
this.cfg.axesDefaults.rendererOptions = {
textColor : '#666F77'
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 1,
renderer: $.jqplot.BarRenderer,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
Github Profile: https://github.com/mertsincan
You can also make it work by setting the tick angle in your skinBar function.
Code: Select all
function skinBar() {
this.cfg.axes.xaxis.tickOptions = {
angle: 30
};
}
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks a lot for your update!
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 18 guests