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

Dynamic label steps for category axis

5 Answers 442 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Bricknode
Top achievements
Rank 1
Bricknode asked on 20 Oct 2018, 01:49 PM

Hi, I have been trying to change the label steps of my category axis but I cannot find a way in the API to do this except for setting the steps to a fixed number .Labels(label => label.Step(12)).

Is there some built in way to do this or should I create a javascript function that returns the steps and then try to access that inside the razor expression? 

5 Answers, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 23 Oct 2018, 10:17 AM
Hello,

One way to do that on the server side is to manually calculate the value of the "step" property in the C# code and set this value in the MVC wrapper.

On the other hand, this can be done on the client-side using the "setOptions" method:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/methods/setoptions

by passing the calculated value as a "categoryAxis.labels.step" option after the chart has been initialized:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.labels#categoryAxis.labels.step

Regards,
Stamo Gochev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bricknode
Top achievements
Rank 1
answered on 24 Oct 2018, 01:03 PM
Hi, if I try setOptions then all the other settings gets dropped and I have to re-populate the categories etc. which I set from a when the chart was created. Is there a way to only change the steps and nothing else in the API?
0
Stamo Gochev
Telerik team
answered on 26 Oct 2018, 10:20 AM
Hello,

If you want to change a specific option setting and keep the rest untouched, you can get the options beforehand and update the "step" value only:

https://dojo.telerik.com/utAPUdep

The code:
setTimeout(function() {
    var categoryAxis = chart.options.categoryAxis;
    categoryAxis.labels.step = 1;
 
    chart.setOptions({
        categoryAxis: [categoryAxis]
    });
}, 1000);
takes the current configuration of the category axis and updates the step from 3 to 1.

Can you have a look at the sample and inform me if this is what you want to achieve?

Regards,
Stamo Gochev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bricknode
Top achievements
Rank 1
answered on 28 Oct 2018, 09:28 AM

That works great, thanks!

Can I also access the HtmlAttributes through setOptions to change the height of the chart or does that work differently?

0
Accepted
Stamo Gochev
Telerik team
answered on 30 Oct 2018, 11:30 AM
Hello,

HtmlAttributes values are passed as attributes to the rendered "div" element (that is the wrapper) and the chart automatically resizes to its dimensions, so setting:
@(Html.Kendo().Chart()
 
    .HtmlAttributes(new { height = "800px" })
)
will render:

<div id="chart" style="height: 500px">...</div>
The chart does not have width/height options, which can be checked in the documentation:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration

This is the reason why using "setOptions" will not change the dimensions. What I can suggest is to set the dimensions on the "div" element directly, e.g.:

https://dojo.telerik.com/OloWEzuT

Regards,
Stamo Gochev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart
Asked by
Bricknode
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Bricknode
Top achievements
Rank 1
Share this question
or