2 dynamic charts that adjust to have the same vertical axis hieght/values

[Davin]

I have 2 different charts and I want them to reach the vertical axis values. I want the shorter one to adjust to whatever the taller chart's axis value is.

So if chart 1's tallest bar is $100 and chart 2's is only $50, I want chart 2's axis to rise to $100 as well. Bascially this allows easier comparison between the 2 side by side charts.

How would I set this up? 

I am Using MVC and below are the 2 charts I am using...

chart 2...

<div class="chart-wrapper">
                    @(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
        .Name("LabourUtilizationCategory1Chart")
        .Title("Labour Utilization Categories")
        .Legend(legend => legend
            .Visible(false)
        )

    .DataSource(ds => ds.Read(read => read.Action("_GetTop3CatUtilization", "Report")
                                            .Data("function(){return _GetAttr(1);}")))
                                            .AutoBind(false)

        .Series(series =>
        {
            series.Column(model => model.Value)
                .Name("Waste")
                .Color("#FF0000")
                .Overlay(ChartBarSeriesOverlay.None)
                .Labels(labels => labels.Format("{0:N0}%").Visible(false))
                .Gap(.3);
        })

        .CategoryAxis(axis => axis
            .Categories(model => model.Date)
            .Line(line => line.Visible(true))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
            .Labels(labels => labels.Rotation(-45)
                                    .Padding(0, 0, 0, -35)
                                    .Step(2))
        )

        .ValueAxis(axis => axis.Numeric()
            .Title("Efficiency")
            .Labels(labels => labels.Format("{0:N0}%"))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
        )
                .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0:N0}%")
        )
        .ChartArea(chartArea => chartArea.Background("Transparent"))
    )
                </div>

chart2...

                <div class="chart-wrapper">
                    @(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
        .Name("LabourUtilizationCategory2Chart")
        .Title("Labour Utilization Categories")
        .Legend(legend => legend
            .Visible(false)
        )

    .DataSource(ds => ds.Read(read => read.Action("_GetTop3CatUtilization", "Report")
                                            .Data("function(){return _GetAttr(2);}")))
                                            .AutoBind(false)

        .Series(series =>
        {
            series.Column(model => model.Value)
                .Name("Waste")
                .Color("#FF0000")
                .Overlay(ChartBarSeriesOverlay.None)
                .Labels(labels => labels.Format("{0:N0}%").Visible(false))
                .Gap(.3);
        })

        .CategoryAxis(axis => axis
            .Categories(model => model.Date)
            .Line(line => line.Visible(true))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
            .Labels(labels => labels.Rotation(-45)
                                    .Padding(0, 0, 0, -35)
            .Step(2))
        )

        .ValueAxis(axis => axis.Numeric()
            .Title("Efficiency")
            .Labels(labels => labels.Format("{0:N0}%"))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
        )
                .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0:N0}%")
        )
        .ChartArea(chartArea => chartArea.Background("Transparent"))
    )
                </div>

[Iliana Dyankova]

Hi Davin,

In order to achieve this you could set equal min / max values to both of the charts. For example: 

@(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
   .Name("LabourUtilizationCategory1Chart")
    //...
    .ValueAxis(axis => axis.Numeric()
       .Title("Efficiency")
       //...
       .Min(10)
       .Max(100)
     )
//....
)

//....
@(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
     .Name("LabourUtilizationCategory2Chart")
      //....
     .ValueAxis(axis => axis.Numeric()
        .Title("Efficiency")
         //....
         .Min(10)
         .Max(100)
      )
//....
 )

Regards,
Iliana Nikolova
Telerik