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

[Ian]

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();

[Iliana Nikolova]

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

[Ian]

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

[Iliana Nikolova]

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

[Nathan]

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.

[Iliana Nikolova]

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

 

 

[Nathan]

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

[Iliana Nikolova]

Hi Nathan,

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

Regards,
Iliana Nikolova
Telerik

 

 

[Pierre]

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)

[Stefan]

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