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
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.
Iliana Nikolova
Telerik
Rank 2
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
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).
Iliana Nikolova
Telerik
Rank 1
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.
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
Rank 1
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
Thank you for the feedback - I forwarded it to the team for further discussions.
Regards,
Iliana Nikolova
Telerik
Rank 1
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)
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
Rank 1
Iron
Rank 1
Iron
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>
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:
Regards,
Martin
Rank 1
Iron
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",
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/
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