Kendo Bar Chart Multiple Groups

[jovaughn]

Does the kendo non-stacked or stacked bar chart have the ability to have multple groups displayed like the attached example?

I am looking to replicate the coffee/tea per month part of the picture

[Alex Hajigeorgieva]

Hi, Jovaughn,

Thank you very much for the provided screenshot.

You can achieve the desired look by adding a second category axis with the two categories and pointing the data to be rendered according to the first axis name:

series.Column(x => x.Freight).Axis("AxisName");

Here is a basic example of one possible way to achieve that:

https://dojo.telerik.com/omupEyar

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[jovaughn]

The above answer seems to work in a basic scenario.

I would expect the data in your dojo to have the green(jan) data aligned with the January box and the blue(Feb) data to be aligned with the Feb box/group.

For the charts I've attached i have grouped and stacked data. I have gotten everything needed except displaying a single label for each stack. The current setup shows labels for each section/piece of the stack. I would like to show one label per stack. Is  this possible?

Razor code for chart:

@(Html.Kendo().Chart<RevenueSummaryViewModel>
   ()
   .Name("RevenueSummaryChart")
   .Legend(legend => legend.Visible(true).Labels(l => l.Font("10px")).Position(ChartLegendPosition.Right).Padding(0, 15, 0, 0))
   .SeriesDefaults(sd => sd.Bar())
   .Events(ev => ev.DataBound("SetSeriesStack"))
   .Series(series =>
   {
       series.Column(model => model.TotalAmount)
           .Field("TotalAmount")
           .CategoryField("MonthAndYear")
           .CategoryAxis("DateAxis")
           .Name("#=group.value#")
          .Labels(x => x.Position(ChartBarLabelsPosition.InsideBase).Visible(false).Template("#=dataItem.ActivityLocation#").Rotation(-90).Margin(10, 0, 0, 0))
           .Tooltip(t => t.Visible(true).Template("<div style='text-align:left;'>#=series.name#<br />Total: #=kendo.toString(value, 'c')#<br />Records: #=dataItem.RecordCount#<br />Activity Center: #=dataItem.ActivityCenter#</div>"));

   })
   .CategoryAxis(x => x.Name("LocationAxis").Labels(z => z.Rotation(-90)))
   .CategoryAxis(x => x.Name("DateAxis"))
   .ValueAxis(x => x.Numeric().Labels(l => l.Format("{0:c0}")).Name("AmountAxis"))
   .DataSource(ds => ds.Read(rd => rd.Action("GetRevenueSummary", "Revenue").Data("SendSelectedLocationId")).Group(grp => grp.Add(add => add.ActivityCenter)))
       )

 

DataBound function from telerik demo

function SetSeriesStack(e) {
        var series = e.sender.options.series;
        for (var i = 0; i < series.length; i++) {
            series[i].stack = series[i].data[0].ActivityLocation;
        }
    }

 

 

 

 

[Alex Hajigeorgieva]

Hello, Jovaughn,

Multigroups are not a supported scenario for the Kendo UI Charts. The suggestion I offered can help render a second category axis with precalculated values with the current capabilities that are available to us. If you wish to show the data under the respective month then you could group them by type and just set stack true.

For the labels, you could define a visible handler:

https://dojo.telerik.com/@bubblemaster/AZemAfiY

        series:[{
              type: "column",
              field: "value",
              stack: true,
              labels:{
                visible: function(e){
                  return e.series.name == "South-tea"
                }
              }
            }],

Kind Regards,
Alex Hajigeorgieva
Progress Telerik