Dynamic label steps for category axis

[Bricknode]

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? 

[Stamo Gochev]

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

[Bricknode]

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?

[Stamo Gochev]

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

[Bricknode]

That works great, thanks!

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

[Stamo Gochev]

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