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

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

2 Answers 250 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 30 Oct 2017, 05:58 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 01 Nov 2017, 11:39 AM
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.
0
Mark
Top achievements
Rank 1
answered on 01 Nov 2017, 12:04 PM

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.

 

 

 

 

 

 

 

 

Tags
Charts
Asked by
Mark
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Mark
Top achievements
Rank 1
Share this question
or