Multiple panes in ASP.NET MVC 3D Chart Component

9 Jan 202414 minutes to read

The chart area can be divided into multiple panes using Rows and Columns.

Rows

To split the chart area vertically into number of rows, use Rows property of the 3D chart.

The space for each row can be allocated by using the Height property. The value can be either in percentage or in pixel.
To associate a vertical axis to a particular row, specify its index to RowIndex property of the axis.

CSHTML
Row.cs
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("x").
      YName("y").
      Name("Germany").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("x").
      YName("y1").
      Name("Japan").
      YAxisName("yAxis").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .Rows(rows =>
   {
      rows.Height("50%").Add();
      rows.Height("50%").Add();
   })
   .Axes(ax =>
   {
      ax.OpposedPosition(true).RowIndex(1).Minimum(24).Maximum(36).Interval(4).Name("yAxis").Title("Temperature (Celsius)").LabelFormat("{value}°C").MajorGridLines(mg => mg.Width(0)).Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Months").Interval(1)
   )
   .PrimaryYAxis(py => 
      py.Minimum(0).Maximum(90).Interval(20).Title("Temperature (Fahrenheit)").LabelFormat("{value}°F")
   )
   .Title("Weather Condition")
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "Jan", y= 15, y1= 33 },
        new ChartData { x= "Feb", y= 20, y1= 31 },
        new ChartData { x= "Mar", y= 35, y1= 30 },
        new ChartData { x= "Apr", y= 40, y1= 28 },
        new ChartData { x= "May", y= 80, y1= 29 },
        new ChartData { x= "Jun", y= 70, y1= 30 },
        new ChartData { x= "Jul", y= 65, y1= 33 },
        new ChartData { x= "Aug", y= 55, y1= 32 },
        new ChartData { x= "Sep", y= 50, y1= 34 },
        new ChartData { x= "Oct", y= 30, y1= 32 },
        new ChartData { x= "Nov", y= 35, y1= 32 },
        new ChartData { x= "Dec", y= 35, y1= 31 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
}

For spanning the vertical axis along multiple rows, use Span property of an axis.

CSHTML
Row-span.cs
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("x").
      YName("y").
      Name("Germany").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("x").
      YName("y1").
      Name("Japan").
      YAxisName("yAxis").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .Rows(rows =>
   {
      rows.Height("50%").Add();
      rows.Height("50%").Add();
   })
   .Axes(ax =>
   {
      ax.OpposedPosition(true).RowIndex(1).Minimum(24).Maximum(36).Interval(4).Name("yAxis").Title("Temperature (Celsius)").LabelFormat("{value}°C").MajorGridLines(mg => mg.Width(0)).Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Months").Interval(1)
   )
   .PrimaryYAxis(py => 
      py.Minimum(0).Maximum(90).Interval(20).Title("Temperature (Fahrenheit)").LabelFormat("{value}°F").Span(2)
   )
   .Title("Weather Condition")
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "Jan", y= 15, y1= 33 },
        new ChartData { x= "Feb", y= 20, y1= 31 },
        new ChartData { x= "Mar", y= 35, y1= 30 },
        new ChartData { x= "Apr", y= 40, y1= 28 },
        new ChartData { x= "May", y= 80, y1= 29 },
        new ChartData { x= "Jun", y= 70, y1= 30 },
        new ChartData { x= "Jul", y= 65, y1= 33 },
        new ChartData { x= "Aug", y= 55, y1= 32 },
        new ChartData { x= "Sep", y= 50, y1= 34 },
        new ChartData { x= "Oct", y= 30, y1= 32 },
        new ChartData { x= "Nov", y= 35, y1= 32 },
        new ChartData { x= "Dec", y= 35, y1= 31 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
}

Columns

To split the chart area horizontally into number of columns, use Columns property of the 3D chart.

The space for each column can be allocated by using the Width property. The given width can be either in percentage or in pixel.
To associate a horizontal axis to a particular column, specify its index to ColumnIndex property of the axis.

CSHTML
Column.cs
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("x").
      YName("y").
      Name("Germany").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("x").
      YName("y1").
      Name("Japan").
      XAxisName("xAxis").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .Columns(columns =>
   {
      columns.Width("50%").Add();
      columns.Width("50%").Add();
   })
   .Axes(ax =>
   {
      ax.Name("xAxis").ColumnIndex(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0)).Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Interval(1)
   )
   .PrimaryYAxis(py => 
      py.Minimum(0).Maximum(90).Interval(10).Title("Temperature (Fahrenheit)").LabelFormat("{value}°F")
   )
   .Title("Weather Condition")
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "Jan", y= 15, y1= 33 },
        new ChartData { x= "Feb", y= 20, y1= 31 },
        new ChartData { x= "Mar", y= 35, y1= 30 },
        new ChartData { x= "Apr", y= 40, y1= 28 },
        new ChartData { x= "May", y= 80, y1= 29 },
        new ChartData { x= "Jun", y= 70, y1= 30 },
        new ChartData { x= "Jul", y= 65, y1= 33 },
        new ChartData { x= "Aug", y= 55, y1= 32 },
        new ChartData { x= "Sep", y= 50, y1= 34 },
        new ChartData { x= "Oct", y= 30, y1= 32 },
        new ChartData { x= "Nov", y= 35, y1= 32 },
        new ChartData { x= "Dec", y= 35, y1= 31 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
}

For spanning the vertical axis along multiple column, you can use Span property of an axis.

CSHTML
Column-span.cs
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("x").
      YName("y").
      Name("Germany").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("x").
      YName("y1").
      Name("Japan").
      XAxisName("xAxis").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .Columns(columns =>
   {
      columns.Width("50%").Add();
      columns.Width("50%").Add();
   })
   .Axes(ax =>
   {
      ax.Name("xAxis").ColumnIndex(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0)).Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Interval(1).Span(2)
   )
   .PrimaryYAxis(py => 
      py.Minimum(0).Maximum(90).Interval(10).Title("Temperature (Fahrenheit)").LabelFormat("{value}°F")
   )
   .Title("Weather Condition")
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "Jan", y= 15, y1= 33 },
        new ChartData { x= "Feb", y= 20, y1= 31 },
        new ChartData { x= "Mar", y= 35, y1= 30 },
        new ChartData { x= "Apr", y= 40, y1= 28 },
        new ChartData { x= "May", y= 80, y1= 29 },
        new ChartData { x= "Jun", y= 70, y1= 30 },
        new ChartData { x= "Jul", y= 65, y1= 33 },
        new ChartData { x= "Aug", y= 55, y1= 32 },
        new ChartData { x= "Sep", y= 50, y1= 34 },
        new ChartData { x= "Oct", y= 30, y1= 32 },
        new ChartData { x= "Nov", y= 35, y1= 32 },
        new ChartData { x= "Dec", y= 35, y1= 31 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
}