Dynamic label steps for category axis

6 posts, 1 answers
  1. Bricknode
    Bricknode avatar
    7 posts
    Member since:
    Sep 2016

    Posted 20 Oct 2018 Link to this post

    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? 

  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    208 posts

    Posted 23 Oct 2018 Link to this post

    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.
  3. Bricknode
    Bricknode avatar
    7 posts
    Member since:
    Sep 2016

    Posted 24 Oct 2018 in reply to Stamo Gochev Link to this post

    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 datasource when the chart was created. Is there a way to only change the steps and nothing else in the API?
  4. Stamo Gochev
    Admin
    Stamo Gochev avatar
    208 posts

    Posted 26 Oct 2018 Link to this post

    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.
  5. Bricknode
    Bricknode avatar
    7 posts
    Member since:
    Sep 2016

    Posted 28 Oct 2018 in reply to Stamo Gochev Link to this post

    That works great, thanks!

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

  6. Answer
    Stamo Gochev
    Admin
    Stamo Gochev avatar
    208 posts

    Posted 30 Oct 2018 Link to this post

    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.
Back to Top