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.
Post Reply
emre
Posts: 22
Joined: 25 Jan 2011, 12:30

09 May 2018, 12:27

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.

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

09 May 2018, 13:28

Hi,

Please, could you send example code or sample test?

emre
Posts: 22
Joined: 25 Jan 2011, 12:30

09 May 2018, 18:08

Hi below is the java code where bar chart model is created

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");
This the facelet decrlation for the bar chart

Code: Select all

 
 <div class="card">
       <p:chart type="bar"
             model="#{hrResourcesDashboardView.educationLevelStatusBarModel}"
              responsive="true"/>
  </div>
PS: I could reproduce the same issue with the demo ultima application v.1.1.2.

Thank you.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

21 May 2018, 08:42

Thanks a lot for the sample code. Please try;

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'
        }
    }
}
Best Regards,

gokceonen
Posts: 1
Joined: 15 Apr 2021, 00:01

15 Apr 2021, 00:07

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
    };
}

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

07 May 2021, 08:21

Glad to hear, thanks a lot for your update!

Best Regards,

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests