This is a migrated thread and some comments may be shown as answers.

Chart with stacked columns and single line

1 Answer 142 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Domagoj
Top achievements
Rank 1
Domagoj asked on 06 Mar 2017, 09:40 AM

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? 

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 07 Mar 2017, 05:00 PM
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.
Tags
Chart
Asked by
Domagoj
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or