Chart with multiple, grouped category axes

[Hughes]

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

[Iliana Dyankova]

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

[Michelle]

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!

[Tsvetomir]

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

[Michelle]

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!

[Teya]

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