How to Overlap Column Series

[Pablo]

Hello i need overlap column series, example maked in ms paint is attached. thanks!.

[Iliana Dyankova]

Hello Pablo,

This functionality is not supported in Kendo UI DataViz, however this idea sounds good and I will suggest to send it as a feature request at our UserVoice page. This way the community would be able to vote and comment it - its implementation depends on the users feedback and the number of votes.

 

Regards,
Iliana Nikolova
the Telerik team

[Pablo]

thank you very much for your fast answer.

[Iliana Dyankova]

Hello Pablo,

We've discussed your scenario yesterday and I am glad to say that we managed to find a workaround that might suit your requirements. You could achieve the desired behavior as set spacing: -1 to the chart series. For example: 

$("#chart").kendoChart({
   //....
   series: [{
     name: "World",
     data: [2,3,4],
     spacing: -1
     }, {
     name: "United States",
     data: [1.5,2.5,3.5]
   }]
});

For convenience, I prepared a small example which illustrates such approach in action.

Regards,
Iliana Nikolova
the Telerik team

[Yeyuan]

Hello,

I've encountered the same problem, and I set the spacing to -1 and it worked for one group of series.

However, when I have multiple groups of series, this method won't work and it will make everything into one column. Please see attached.

I use the razor way for the page, and please see my code below.

@(Html.Kendo()
    .Chart(Model)
    .Name("UtilityRecovery")
    .Title("Utility Recovery")
    .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
    .Series(series =>
    {
        series
            .Column(value => value.MonthSewerExpense)
            .Name("Sewer Expense")
            .Color("#b2cd48")
            .Stack("SewerExpense")
            .Spacing(-1) ;
        series
            .Column(value => value.MonthSewer)
            .Name("Sewer Billed")
            .Color("#d7e4bd")
            .Stack("Sewer") ;
        series
            .Column(value => value.MonthWaterExpense)
            .Name("Water Expense")
            .Color("#42456b")
            .Stack("WaterExpense") ;
        series
            .Column(value => value.MonthWater)
            .Name("Water Billed")
            .Color("#89a0bb")
            .Stack("Water") ;
    } )
    .CategoryAxis(axis => axis
            .Categories(model => model.MonthName)
            .Max(20)
            .AxisCrossingValue(0, 21)
        )
    .ValueAxis(axis => axis
        .Numeric("")
        .Color("#000")
        .Line(line => line.Visible(true))
        .Labels(labels => labels.Format("${0}"))
        )
    .Tooltip(tooltip => tooltip
        .Shared(true)
        .Visible(true)
        .Template("$ #= kendo.toString(value,'N2') #")
        )
)

Please let me know how I could have different groups seperated while still have the same group overlap. Thanks!

Something similar to this 

https://demos.telerik.com/aspnet-mvc/bar-charts/grouped-stacked-bar

but within each group, I want Overlapping and NO Stacking.

 

Hope to hear from you soon.

 

Best regard!

 

[Yeyuan]

http://demos.telerik.com/aspnet-mvc/bar-charts/gap-spacing

Hey,

From my understanding of this link above, the spacing set to -1 only matters for the first series, and so I did it the same way for my page.

I tried setting spacing to -1 for other series but they won't work.

Please let me know your best solution.

 

Best regards!

[Stefan]

Hello, Yeyuan,

Thank you for the provided details, I can assume that the desired result is to have for example one stacked bar for "Sewer expense" and "Sewer billed" then another one for the other two series?

If this is correct I can suggest having a specific new property to stack the series like Sewer and Water and then "Sewer expense" and "Sewer billed" will be like the names in the provided demo. Then the desired result should be achieved.

If this is not possible, please provide a fully runnable example, so we can observe the data format and provide a suggestion best suited for it.

Regards,
Stefan
Progress Telerik