Group by quarter on Kendo UI chart

[Ben]

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

[Nikolay]

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:

• https://dojo.telerik.com/iDEdiQub

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:

• https://feedback.telerik.com/kendo-jquery-ui/1358671-support-quarters-in-date-series-just-like-weeks

Regards,
Nikolay
Progress Telerik

[Ben]

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]

Hi Ben,

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

Regards,

Nikolay