How to Overlap Column Series

7 posts, 1 answers
  1. Pablo
    Pablo  avatar
    6 posts
    Member since:
    May 2011

    Posted 05 Jul 2012 Link to this post

    Hello i need overlap column series, example maked in ms paint is attached. thanks!.
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 06 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Pablo
    Pablo  avatar
    6 posts
    Member since:
    May 2011

    Posted 06 Jul 2012 Link to this post

    thank you very much for your fast answer.
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 09 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Yeyuan
    Yeyuan avatar
    3 posts
    Member since:
    Mar 2017

    Posted 21 Sep in reply to Iliana Nikolova Link to this post

    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!

     

  6. Yeyuan
    Yeyuan avatar
    3 posts
    Member since:
    Mar 2017

    Posted 21 Sep in reply to Iliana Nikolova Link to this post

    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!

  7. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 26 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top