Chart with multiple, grouped category axes

6 posts, 0 answers
  1. Hughes
    Hughes avatar
    2 posts
    Member since:
    Jun 2011

    Posted 05 Nov 2013 Link to this post

    Hi,

    I would like to make a chart with multiple category axes that are grouped.  So the data might look something like the attached screenshot (data.png).  I want the chart to look similar to the attached Excel chart (chart.png).  I've tried making multiple, independent category axes in Kendo.  The problem is that the labels in the lower axis (the countries in this example) are spaced out equally instead of being grouped with the upper axis labels (the cities).  There may be a different numbers of cities for each country, so spacing them out equally doesn't work.  The long tick marks would be nice, but they're not required.  Mainly, I just need the countries to appear correctly below the cities in those countries, even if there are a different number of cities in each country.  Is there a way to do this in Kendo?

    Regards,
    Hughes
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 07 Nov 2013 Link to this post

    Hello Hughes,

    I already replied to the same question in you other thread, however I am pasting my answer here too:

    I am afraid this scenario is not supported by Kendo UI Chart and there is no a workaround which I can suggest and which will be applicable in every situation. Please accept my apologies for the inconvenience caused.
     

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Michelle
    Michelle avatar
    2 posts
    Member since:
    Nov 2018

    Posted 25 Aug 2019 in reply to Iliana Nikolova Link to this post

    Hi,

    Appreciate if you can advise if this scenario is already supported by Kendo UI Chart now? Or any possible workaround is already available?

    Thank you!

  4. Tsvetomir
    Admin
    Tsvetomir avatar
    756 posts

    Posted 27 Aug 2019 Link to this post

    Hi Michelle,

    Grouping of the data and showing it in a bar chart is a functionality which is already available. An example of the grouped bar chart could be found here:

    https://demos.telerik.com/kendo-ui/bar-charts/grouped-data

    In order to achieve a similar appearance to the one in the screenshot of Hughes, you would have to enable the labels of the series.


    Regards,
    Tsvetomir
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Michelle
    Michelle avatar
    2 posts
    Member since:
    Nov 2018

    Posted 27 Aug 2019 in reply to Tsvetomir Link to this post

    Hi Tsvetomir,

    Thank you for your prompt reply and info about the grouped bar chart.

    You mentioned that we can achieve the labels as in the Hughes's screenshot above, by enabling the labels of the series. How can we position the labels below the x-axis, exactly like the one in Hughes's screenshot? As far as I know, series labels can only be positioned as per described here:

    https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.labels.position 

    I've tried padding as well but I'm not able to have it shown below the x-axis.

    example

     

    Thank you!

  6. Teya
    Admin
    Teya avatar
    1 posts

    Posted 29 Aug 2019 Link to this post

    Hello Michelle,

    You can achieve a similar layout by adding position: "insideBase"  to the series label, sufficient top margin and rotation:

    series: [{
        type: "column",
        field: "close",
        categoryField: "date",
        name: "#= group.value # (close)",
        labels: {
          visible: true,
          template: "#= dataItem.symbol #",
          position: "insideBase",
          rotation: -90,
          margin: {
            top: 60
          },
        }
    }],

    Also, you should add a top margin to the categoryAxes labels:

    categoryAxis: {
        labels: {
            format: "MMM",
            margin: {
              top: 60
            },
        }
    }

    I have updated the Dojo with the suggested approach:

    https://dojo.telerik.com/UFawIBIn/2

    I hope this would be helpful.


    Regards,
    Teya
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top