Stacking chart controls is an alternative to creating a single chart with multiple plot areas. Use the plotMargin property to ensure the charts line up properly:

// This file locates: "Content/css/Lesson/C1FlexChart/StackedCharts.css".
.chart-holder {
  padding: 15px 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
}
.wj-flexchart {
  height: 200px;
  border: none;
  padding: 0;
  margin: 0;
}
#theChartQty {
  height: 150px; 
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: StackedCharts
        public ActionResult StackedCharts()
        {
            return View(Models.FlexChartData.GetSales1());
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.StackedCharts_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.StackedCharts_Text1)
</p>
 
<div class="chart-holder">
    @(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChartAmounts")
        .Bind("Country", Model)
        .Header(Resources.C1FlexChart.PlotAreas_Text4)
        .AxisX(x => x.Position(C1.Web.Mvc.Chart.Position.None))
        .Series(sb =>
        {
            sb.Add().Binding("Sales").Name("Sales");
            sb.Add().Binding("Expenses").Name("Expenses");
        })
        .PlotMargin("NaN 120 10 50")
    )
    @(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChartQty")
        .Bind("Country", Model)
        .Series(sb =>sb.Add().Binding("Downloads").Name("Downloads").ChartType(C1.Web.Mvc.Chart.ChartType.LineSymbols))
        .PlotMargin("10 120 NaN 60")
    )
</div>