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

Chart with multiple, grouped category axes

5 Answers 440 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Hughes
Top achievements
Rank 1
Hughes asked on 05 Nov 2013, 08:40 PM
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

5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 07 Nov 2013, 01:42 PM
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!
0
Michelle
Top achievements
Rank 1
answered on 26 Aug 2019, 01:19 AM

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!

0
Tsvetomir
Telerik team
answered on 27 Aug 2019, 10:14 AM
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.
0
Michelle
Top achievements
Rank 1
answered on 28 Aug 2019, 01:44 AM

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!

0
Teya
Telerik team
answered on 29 Aug 2019, 11:35 AM
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.
Tags
Charts
Asked by
Hughes
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Michelle
Top achievements
Rank 1
Tsvetomir
Telerik team
Teya
Telerik team
Share this question
or