How do you change the category title text when using baseUnit fit?

3 posts, 1 answers
  1. Mark
    Mark avatar
    4 posts
    Member since:
    Aug 2017

    Posted 30 Oct 2017 Link to this post

    I have a line chart that shows hours when they fit, otherwise days.  Currently I have the category title text set to Time.  How do I make the category title text dynamically display hours or days depending on which one the chart dynamically displays?  Thank you.

    k-category-axis="{
        title: {
            text: 'Time',
            font: '12px Segoe UI,Tahoma,Geneva,sans-serif'
        },   
        type: 'date',
        baseUnit: 'fit',
        maxDateGroups: 24,
        autoBaseUnitSteps: {
            hours: [1],
            days: [1]
        },
        labels: {
            rotation: -45, 
            dateFormats: {
                hours: 'HH mm',
                days: 'MM/dd'
            }
        }
    }"

     

  2. Answer
    Stefan
    Admin
    Stefan avatar
    1797 posts

    Posted 01 Nov 2017 Link to this post

    Hello, Mark,

    This can be achieved using two approaches:

    1) If the type "hours" or "days" can be set to a variable, which can be set to the corresponding value using a custom logic to determine if the Chart will fit hours or days.

    2) After the Chart is rendered on the render event to use custom logic and based on the data to change it dynamically using the setOptions method:

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

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

    Please have in mind that the example is just showing how it can be done, but based on the data, the logic to determine the title can be different:

    http://dojo.telerik.com/Obilo


    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Mark
    Mark avatar
    4 posts
    Member since:
    Aug 2017

    Posted 01 Nov 2017 in reply to Stefan Link to this post

    Here is what I ended up doing.  Maybe it can help someone else.

    $scope.UpdateCategoryAxisText = function (chartObject) {
        var chart = chartObject.data("kendoChart");
        if (chart === null) {
            return;
        }
        var baseUnit = chart._plotArea.categoryAxis.options.baseUnit;
        chart.options.categoryAxis.title.text = baseUnit.charAt(0).toUpperCase() + baseUnit.slice(1);
        chart.refresh();
    };

     

    Thank you.

     

     

     

     

     

     

     

     

Back to Top