Group by quarter on Kendo UI chart

1 Answer 28 Views
Charts
Ben
Top achievements
Rank 1
Ben asked on 13 Jan 2022, 05:12 PM

I'm trying to group my category axis by year and quarter but am struggling to find a suitable solution. I've found this was requested in the following link some time ago (2013). Has there been any sort of implementation to group on quarters?

https://www.telerik.com/forums/please-consider-supporting-quarters-in-date-series-just-like-weeks

Thanks
Ben

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 18 Jan 2022, 10:26 AM

Hi Ben,

The current option to achieve the desired is to use 'months' as baseUnit and the value '3' for the baseUnitStep. For example:

categoryAxis: {
              categories: [
                new Date("2021/01/01 00:00:00"),
                new Date("2021/02/01 00:00:00"),
                new Date("2021/03/01 00:00:00"),
                new Date("2021/04/01 00:00:00"),
                new Date("2021/05/01 00:00:00"),
                new Date("2021/06/01 00:00:00"),
                new Date("2021/07/01 00:00:00"),
                new Date("2021/08/01 00:00:00"),
                new Date("2021/09/01 00:00:00"),
                new Date("2021/10/01 00:00:00"),
                new Date("2021/11/01 00:00:00"),
                new Date("2021/12/01 00:00:00"),
              ],
              baseUnitStep: "3", // Displays a category for every 3 months.
              baseUnit: "months"
            },

Here is a Dojo demo I prepared demonstrating this:

There is also a feature request for a quarter base unit and we are looking into implementing it at some point in the near future. Feel free to cast your vote for it at the below link:

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Ben
Top achievements
Rank 1
commented on 18 Jan 2022, 12:39 PM

Hi Nikolay,

Thanks for the reply, I used the following in the end (my dataset returns the previous 5 years plus current year):

categoryAxis: {
	baseUnit: "fit",
	autoBaseUnitSteps: {months: [3]},
	maxDateGroups: 24,
	axisCrossingValues: [0, 10000],
	labels: {
		rotation: 315,
		template: kendo.template("#=value.getFullYear() + ' Q' + Math.floor((value.getMonth() + 3) / 3)#")
	}
}

Nikolay
Telerik team
commented on 21 Jan 2022, 08:48 AM

Hi Ben,

Thank you for sharing this. I believe it might be helpful to others facing the same scenario.

Regards,

Nikolay

Tags
Charts
Asked by
Ben
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or