Multiple panes in ASP.NET CORE 3D Chart Component

9 Jan 202416 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.
<ejs-chart3d id="container" title="Weather Condition" wallColor="transparent" enableRotation="true" rotation="7"
    tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" title="Months"
        interval="1"></e-chart3d-primaryxaxis>
    <e-chart3d-primaryyaxis minimum="0" maximum="90" title="Temperature (Fahrenheit)" interval="20"
        labelFormat="{value}°F"></e-chart3d-primaryyaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="Germany"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Japan" yAxisName="yAxis"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
    <e-chart3d-rows>
        <e-chart3d-row height="50%"></e-chart3d-row>
        <e-chart3d-row height="50%"></e-chart3d-row>
    </e-chart3d-rows>
    <e-chart3d-axes>
        <e-chart3d-axis rowIndex="1" opposedPosition="true" minimum="24" maximum="36" interval="4" name="yAxis"
            title="Temperature (Celsius)" labelFormat="{value}°C">
            <e-majorgridlines width="0"></e-majorgridlines>
        </e-chart3d-axis>
    </e-chart3d-axes>
</ejs-chart3d>
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.

<ejs-chart3d id="container" title="Weather Condition" wallColor="transparent" enableRotation="true" rotation="7"
    tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" title="Months"
        interval="1"></e-chart3d-primaryxaxis>
    <e-chart3d-primaryyaxis minimum="0" maximum="90" title="Temperature (Fahrenheit)" interval="20"
        labelFormat="{value}°F" span="2"></e-chart3d-primaryyaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="Germany"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Japan" yAxisName="yAxis"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
    <e-chart3d-rows>
        <e-chart3d-row height="50%"></e-chart3d-row>
        <e-chart3d-row height="50%"></e-chart3d-row>
    </e-chart3d-rows>
    <e-chart3d-axes>
        <e-chart3d-axis rowIndex="1" opposedPosition="true" minimum="24" maximum="36" interval="4" name="yAxis"
            title="Temperature (Celsius)" labelFormat="{value}°C">
            <e-majorgridlines width="0"></e-majorgridlines>
        </e-chart3d-axis>
    </e-chart3d-axes>
</ejs-chart3d>
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.
<ejs-chart3d id="container" title="Weather Condition" wallColor="transparent" enableRotation="true" rotation="7"
    tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" interval="1"></e-chart3d-primaryxaxis>
    <e-chart3d-primaryyaxis minimum="0" maximum="90" title="Temperature (Fahrenheit)" interval="10"
        labelFormat="{value}°F"></e-chart3d-primaryyaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="Germany"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Japan" xAxisName="xAxis"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
    <e-chart3d-columns>
        <e-chart3d-column width="50%"></e-chart3d-column>
        <e-chart3d-column width="50%"></e-chart3d-column>
    </e-chart3d-columns>
    <e-chart3d-axes>
        <e-chart3d-axis columnIndex="1" valueType="@Syncfusion.EJ2.Charts.ValueType.Category" name="xAxis">
            <e-majorgridlines width="0"></e-majorgridlines>
        </e-chart3d-axis>
    </e-chart3d-axes>
</ejs-chart3d>
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.

<ejs-chart3d id="container" title="Weather Condition" wallColor="transparent" enableRotation="true" rotation="7"
    tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" interval="1"
        span="2"></e-chart3d-primaryxaxis>
    <e-chart3d-primaryyaxis minimum="0" maximum="90" title="Temperature (Fahrenheit)" interval="10"
        labelFormat="{value}°F"></e-chart3d-primaryyaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="Germany"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Japan" xAxisName="xAxis"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
    <e-chart3d-columns>
        <e-chart3d-column width="50%"></e-chart3d-column>
        <e-chart3d-column width="50%"></e-chart3d-column>
    </e-chart3d-columns>
    <e-chart3d-axes>
        <e-chart3d-axis columnIndex="1" valueType="@Syncfusion.EJ2.Charts.ValueType.Category" name="xAxis">
            <e-majorgridlines width="0"></e-majorgridlines>
        </e-chart3d-axis>
    </e-chart3d-axes>
</ejs-chart3d>
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;
}