Chart with stacked columns and single line

2 posts, 0 answers
  1. Domagoj
    Domagoj avatar
    1 posts
    Member since:
    Nov 2013

    Posted 06 Mar Link to this post

    I'd like to create chart that shows stacked columns and single line on the same chart area. I can adjust model data as needed, but i couldn't get chart to show this. The other acceptable option is to show two stacked columns per category side by side.

    Are this scenarios achievable using Telerik UI for ASP.NET MVC? 

  2. Tsvetina
    Admin
    Tsvetina avatar
    2076 posts

    Posted 07 Mar Link to this post

    Hi Domagoj,

    Yes, you can display a couple of stacked column series and a single line series in the same Chart. If you copy the following definition to an MVC app, you will see such an implementation:
    @(Html.Kendo().Chart()
        .Name("chart")
        .Series(series => {
            series.Column(new double[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }).Name("India").Stack("columns");
            series.Column(new double[] { 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 }).Name("Russian Federation").Stack("columns");
            series.Column(new double[] { 0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995 }).Name("Germany").Stack("columns");
            series.Line(new double[] { 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 }).Name("World");
        })
        .CategoryAxis(axis => axis
            .Name("series-axis")
            .Line(line => line.Visible(false))
        )
        .CategoryAxis(axis => axis
            .Name("label-axis")
            .Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011")
        )
        .ValueAxis(axis => axis
            .Numeric()
                .Labels(labels => labels.Format("{0}%"))
                 
                // Move the label-axis all the way down the value axis
                .AxisCrossingValue(0, int.MinValue)
        )
    )

    This sample uses static data, but the approach is the same for an AJAX-bound or server-bound Chart.

    What exactly does not work on your side? If the issue persists, please you send me your Chart definition, or a runnable sample showing the problem, if this is possible.

    Regards,
    Tsvetina
    Telerik by Progress
    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