Multi Category Axis Alignment

3 posts, 1 answers
  1. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 25 May 2018 Link to this post


    I have 2 CategoryAxis, by Month and Year:

    .CategoryAxis(axis => axis
                           .Labels(l => l.Format("{0:MMM}"))
                           .MajorGridLines(lines => lines.Visible(false))
                       .CategoryAxis(axis => axis
                           .Labels(l => l.Format("{0:yyyy}"))
                           .MajorGridLines(lines => lines.Visible(false))


    Is there a way to align the Year within that Years Months. For instance currently the years are split evenly along the graph and not sitting within the Jan > Dec of the current year. See attached image.


  2. Answer
    Tsvetina avatar
    2481 posts

    Posted 29 May 2018 Link to this post

    Hi Lee,

    Aligning the second axis to the values in the first one cannot be achieved out of the box with the Chart. What I can suggest is to use a single category axis but draw additional content at its bottom to display the year values. This is done with JavaScript in the Chart render event:

    function onRender(e){
      var categories = this.options.categoryAxis.categories;
      var current = categories[0];
      var currentYear = current.getFullYear();
      var categoriesGroup = new kendo.drawing.Group();
      var axis = this.getAxis("category");
      var slot, year;
      // Traverse all categories and determine where one year starts and where it ends. When a year ends, draw a line to separate it and add a label.
      for (var i = 1; i < categories.length; i++) {
        //compare current year to the year of the current category
        year = categories[i].getFullYear();
        if (year !== currentYear) {
          slot = axis.slot(current, categories[i]);
          slot.size.height = 100;
          //triggers the logic that draws the slot line and label (e.g. 2011)
          categoriesGroup.append(createCategoryGroup(slot, currentYear));
          //reset the current quarter to the new value
          current = categories[i];
          currentYear = current.getFullYear();
      // draw a slot for the last year in the Chart separately as it requires different logic to determine the end of the slot
      var last = categories[categories.length - 1];
      slot = axis.slot(current, new Date(last.getFullYear(), last.getMonth() + 1));
      slot.size.height = 100;
      categoriesGroup.append(createCategoryGroup(slot, current.getFullYear()));
      // if you do not want vertical lines, remove this
      categoriesGroup.append(new kendo.drawing.Path({stroke: {color: "#dfdfdf"}}).moveTo(slot.bottomRight().x, slot.origin.y).lineTo(slot.bottomRight().x, slot.bottomRight().y));
      // output the result in the Chart
    function createCategoryGroup(slot, text) {
      var group = new kendo.drawing.Group();               
      var text = new kendo.drawing.Text(text);               
      kendo.drawing.align([text], slot, "center");
      kendo.drawing.vAlign([text], slot, "center");
      // if you do not want vertical lines, remove this
      group.append(new kendo.drawing.Path({stroke: {color: "#dfdfdf"}}).moveTo(slot.origin.x, slot.origin.y).lineTo(slot.origin.x, slot.bottomRight().y));
      return group;

    You can see a runnable example, where you can modify and test the code, here:

    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. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 30 May 2018 Link to this post

    Hi Tsvetina,

    Many thanks, that helped a lot and answered my question. Very much appreciated.

Back to Top