Auto-rotate category labels?

[Tieson]

I know that Kendo UI doesn't currently provide any way to toggle automatic rotation of category labels (for the line, column, etc. charts that have a category axis). What I'm mostly interested in is some direction on where I should focus my efforts in the source code if I want to try to add this functionality myself. I primarily use the ASP.NET MVC wrappers, but I assume there would be some endpoints I would have to tweak or add to make this work.

I am aware that I can trim the labels; that unfortunately doesn't always work (nor does it often look all that good for my use-cases). The step option also doesn't get me what I need. I *could* manually calculate a rotation angle if I were binding to data on the server end, but that causes the view in which these charts are used to load somewhat slowly (some of the charts are driven by aggregate data that I don't control).

By way of example, the Chart.js library already does this: http://www.chartjs.org/docs/#line-chart-introduction (if you set a narrow viewport, you can see the labels rotate).

[T. Tsonev]

Hello,

Retrofitting this feature will result in a fragile implementation at best. The infrastructure for it is simply not there.
My suggestion is to try a simpler approach such as using 90 degree rotation when the chart is too narrow.

Please file a request for this feature on our UserVoice portal if you have a minute.
This will help us gauge the overall interest and prioritize.

Regards,
T. Tsonev
Telerik

 

 

[Tieson]

Posted to UserVoice, as requested.

Arbitrarily rotating the labels to 90 degrees doesn't normally result in a very pleasant chart, in my experience. I either wind up with a very tall chart (proportionate to the rest of the page), or the plot area (say, where the columns of a column chart render) gets compressed to accommodate the rotated labels.

I really just need a way to set the rotation value of the labels on the client side *after* data has been requested, but I haven't yet found any obvious way to do so.

I would love to be able to do something like:

<script>
     $(function() {
         var chart = $("#my-chart").data("kendoChart");

        /* ... my magic code to calculate required rotation */

        chart.CatergoryAxis.setRotation(rotation);
     });
</script>

[T. Tsonev]

Hi,

The dataBound event will be fired when the data is loaded, but before any rendering has commenced.
Changes to the axis option made at this moment will be applied without further actions, e.g. a call to refresh.

Thanks for the feedback.

Regards,
T. Tsonev
Telerik