This is a migrated thread and some comments may be shown as answers.

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

10 Answers 1403 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 2
Ian asked on 19 Jul 2013, 10:23 PM
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();

10 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 22 Jul 2013, 09:57 AM
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!
0
Ian
Top achievements
Rank 2
answered on 22 Jul 2013, 05:23 PM
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
0
Iliana Nikolova
Telerik team
answered on 23 Jul 2013, 07:56 AM
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!
0
Nathan
Top achievements
Rank 1
answered on 21 Nov 2014, 01:13 AM
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.
0
Iliana Nikolova
Telerik team
answered on 24 Nov 2014, 04:38 PM
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!
 
0
Nathan
Top achievements
Rank 1
answered on 25 Nov 2014, 07:47 PM
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
0
Iliana Nikolova
Telerik team
answered on 27 Nov 2014, 09:19 AM
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!
 
0
Pierre
Top achievements
Rank 1
answered on 05 Sep 2017, 09:01 AM

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)

0
Stefan
Telerik team
answered on 07 Sep 2017, 06:26 AM
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.
0
Christian
Top achievements
Rank 1
Iron
answered on 23 Feb 2023, 09:58 AM | edited on 24 Feb 2023, 03:14 PM
Christian
Top achievements
Rank 1
Iron
commented on 24 Feb 2023, 03:11 PM | edited

Hello we are using angular and have the same issue, I have trouble following the link how to set those things up cause its kind of different. Whats even more strange we managed to fix the legend using the following code: Also some more detailed explanation on the forum would be nice, don't get why we need to do it the way proposed. Could someone give as a angular example and explain the story behind it?

However seems not to always work, e.g. when we zoom out.

  <kendo-chart-x-axis-item-labels
            [position]="'start'"
            [format]="'g'"
        >
  </kendo-chart-x-axis-item-labels>

Martin
Telerik team
commented on 27 Feb 2023, 08:19 AM

Hi Christian,

Thank you for the provided screenshot.

Please keep in mind that this thread is part of the Kendo UI for jQuery suite. Having said that, it is preferable to open a new forum thread but choose Kendo UI for Angular as a product and just reference this thread as a link. This would make it easier to find by the community in the future and keep the different suites separate.

About the case, I am not sure what is the desired outcome. By default, the series item labels don't support different positions for different values. They can show up in the same position for all series items (like in the following demo, the labels are bottom positioned):

https://stackblitz.com/edit/angular-qbctzt

Regarding the position of the axis labels, please check the following section:

https://www.telerik.com/kendo-angular-ui/components/charts/elements/axes/#toc-label-position-of-the-categorical-chart-axes

Regards,

Martin

Christian
Top achievements
Rank 1
Iron
commented on 27 Feb 2023, 11:40 AM | edited



What we want is to make those show at the bottom, which is:

        <kendo-chart-category-axis>
            <kendo-chart-category-axis-item>
                <kendo-chart-category-axis-item-labels [position]="'start'"></kendo-chart-category-axis-item-labels>
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>

We did try to add kendo-chart-category-axis-item [name]="'defaultCategoryAxis'" and setting that name to the series when they are created by setting the property of Series object called `categoryAxis`. None of those was working - currently not sure what else it might be.

Here is a copy of the object data:
Series isnt serializable cause we link inside our 'data' for each point the reference of the series, therefor I provide here a screenshot.


{
categoryAxis: [
    {
        "weekStartDay": 0,
        "name": "defaultCategoryAxis",
        "labels": {
            "position": "start"
        }
    }
],


yAxis: [
    {
        "labels": {
            "visible": true,
            "format": "n4"
        },
        "title": {
            "text": "°"
        }
    }
],

xAxis: [
    {
        "weekStartDay": 0,
        "name": "x",
        "labels": {
            "format": "g"
        },
        "title": {},
        "min": "2023-01-24T23:00:00.000Z",
        "max": "2023-01-25T23:00:00.000Z",
        "baseUnit": "hours",
        "majorUnit": 6
    }
]
}

Might be relevant that we are currently at a lower version of kendo with Angular 13 and kendo-chart 

    "@progress/kendo-angular-charts": "^6.0.1",

 

 

Martin
Telerik team
commented on 28 Feb 2023, 08:44 AM

Hi Christian,

Thank you for the additional details provided for this case.

Setting the position property of the kendo-chart-category-axis-item-labels is the right way to go. But I am not sure why the options don't update the Chart.

I tested the property in a local demo, and the labels were displayed correctly. Please check it out

https://stackblitz.com/edit/angular-8rfixe\

As a side note using Angular v13 allows you to update all Kendo packages to their latest versions:

https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui/

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/#toc-updating-to-latest-versions

To be able to help further, could you try reproducing the issue in a StackBlitz demo or runnable isolated project, so that we can debug the whole Chart implementation? Thank you in advance.

Regards,

Martin

 

 

Tags
Charts
Asked by
Ian
Top achievements
Rank 2
Answers by
Iliana Nikolova
Telerik team
Ian
Top achievements
Rank 2
Nathan
Top achievements
Rank 1
Pierre
Top achievements
Rank 1
Stefan
Telerik team
Christian
Top achievements
Rank 1
Iron
Share this question
or