Moving the Category Axis to bottom when negative values are present (MVC)

10 posts, 0 answers
  1. Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 19 Jul 2013 Link to this post

    In the screenshot you'll see that the Category Axis is at the 0 line and the columns go above and below it. How do I put the Category Azix at the bottom of the chart always?

    Html.Kendo().Chart<AccountPerformance>(Model.Results)
        .Name("chartPCT")
        .Title("% Return")
        .Legend(legend => legend.Visible(false))
        .Series(series =>
                series.Column(model => model.Metrics.Return)
                      .Name(Model.ColumnTitle)
                      .Labels(false)
        )
        .ValueAxis(axis => axis.Numeric()
                               .Labels(labels => labels.Format("{0}%")))
        .CategoryAxis(axis => axis
                                  .Categories(model => model.Observation)
                                  .Labels(labels =>
                                      {
                                          labels.Format("MMM");
                                      }))
        .Render();
  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 22 Jul 2013 Link to this post

    Hi Ian,

    By design the point of intersection between categoryAxis and valueAxis in Kendo UI Chart is 0, however you could change it via the axisCrossingValue options. For working example take a look at this online demo.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 22 Jul 2013 Link to this post

    Hi Lliana,

    Sorry, I was referring not to the horizontal line, but rather the horizontal labels, the "dates". As you can see in the screen shot, the text of the horizontal labels is in the chart itself, not at the bottom of the chart.

    Ian
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 23 Jul 2013 Link to this post

    Hello Ian,

    I apologize for the misunderstanding. In order to move the categoryAxis' labels to the bottom of the chart you could set labels.padding (as in the demo I suggested in my previous post).

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Nathan
    Nathan avatar
    2 posts
    Member since:
    Feb 2012

    Posted 20 Nov 2014 in reply to Iliana Nikolova Link to this post

    Hi Iliana, setting the labels.padding property is not a solution.  

    This relies on you knowing the shape of your data before the chart is rendered.  For example, if the negative values result in a bar height greater than 135 (as per example) you will still have the problem, alternatively, if there are no negative values the labels will look to be in a rather odd position.
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 24 Nov 2014 Link to this post

    Hi Nathan,

    In order to achieve the expected result I would suggest the approach demonstrated in this online demo: 
    - Define two category axes and hide the first one;
    - Set the ValueAxis.axisCrossingValue in the minimum.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Nathan
    Nathan avatar
    2 posts
    Member since:
    Feb 2012

    Posted 25 Nov 2014 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    A colleague actually worked this out without the example but it's good to see this solution validated.

    One thing to point out is the example for MVC has the double Axis approach:

    .CategoryAxis(axis => axis
       .Name("series-axis")
       .Line(line => line.Visible(false))
       )
    .CategoryAxis(axis => axis
       .Name("label-axis")
       .Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011")
    )


    Whereas your HTML5/JavaScript example uses the padding approach:

    categoryAxis: {
       categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
       line: {
          visible: false
       },
       labels: {
          padding: {top: 135}
       }
    }

    We are using the HTML5/JavaScript version so didn't notice the difference in approaches.  I would be good to make these consistent.

    Cheers
    Nathan
  14.
  15. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 27 Nov 2014 Link to this post

    Hi Nathan,

    Thank you for the feedback - I forwarded it to the team for further discussions.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Pierre
    Pierre avatar
    11 posts
    Member since:
    May 2015

    Posted 05 Sep Link to this post

    Hello,

    I have actually the same problem and i didn't find any solution.

    So i tried to convert the ASP solution for JS and used something like this:

    i define an array of categoryAxis and the valueValueAxis.axisCrossingValue :

    categoryAxis: [
        {
            name: "series-axis",
            line: {
                visible: false
            },
        },{
            name: "label-axis",
            categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
        }
    ],
    valueAxis: {
        labels: {
            format: "{0}%"
        },
        axisCrossingValue: [0 ,  #MIN/MAX-VALUE-YAXIS#]
    },

     

    But i can't find how to get the #MIN/MAX-VALUE-YAXIS# i need to use to drow the  "label-axis" on top or bottom of charts.

    You can take a look at http://dojo.telerik.com/iZObid/7.

    I attempted to reload the options by getting axis valueRange or range but none of them looks to give me the result i need.
    You can see in console for each {max: 10, min: 0}.

    If you take a look at the chart, max axis value possible is 12% and min -8%. That's what i need and i don't find any way to get theses values.

    Could you, please help me on this trouble ? (and if i don't have to reload options for this it would be better but not my priority)

  19. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 07 Sep Link to this post

    Hello Pierre,

    Thank you for the provided example.

    The desired result can be achieved by using the valueAxis(it is the actual axis that has the required information) instead of the categoryAxis.

    I modified the example to demonstrate this:

    http://dojo.telerik.com/iZObid/8

    As for the reloading, it is required every time the options of the Chart are changed.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  20.
Back to Top