Plot Areas

By default, each FlexChart has two axes and a single Plot Area.

You may create additional plot areas and stack them vertically or horizontally. Vertically stacked plot areas usually have their own Y axis and a shared X axis. The legend is shared by all plot areas.

For example, the chart below has two plot areas. The first contains two series and show amounts on the Y axis. The second contains a single series and shows quantities on the Y axis:

// This file locates: "Scripts/Lesson/C1FlexChart/PlotAreas.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // create a plot area for amounts
    var p = new wijmo.chart.PlotArea();
    p.row = theChart.plotAreas.length;
    p.name = 'amounts';
    p.height = '2*';
    theChart.plotAreas.push(p)
 
    // create a spacer plot area
    p = new wijmo.chart.PlotArea();
    p.row = theChart.plotAreas.length;
    p.name = 'spacer';
    p.height = 25;
    theChart.plotAreas.push(p)
 
    // create a plot area for quantities
    p = new wijmo.chart.PlotArea();
    p.row = theChart.plotAreas.length;
    p.name = 'quantities';
    p.height = '*';
    var axisYQty = new wijmo.chart.Axis(wijmo.chart.Position.Left);
    axisYQty.plotArea = p;
    theChart.series[2].axisY = axisYQty;
    theChart.plotAreas.push(p);
});

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.PlotAreas_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.PlotAreas_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.PlotAreas_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.PlotAreas_Text3)
</p>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .Header(Resources.C1FlexChart.PlotAreas_Text4)
    .Series(sb=>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Downloads").Name("Downloads").ChartType(C1.Web.Mvc.Chart.ChartType.LineSymbols);
    })
)