Multiple Panes in ASP.NET Core Chart control

30 Jul 2021 / 2 minutes to read

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 chart.

You can allocate space for each row 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.
To customize each row’s bottom line, use border property.

tagHelper

row.cs

<ejs-chart id="lineContainer" title="Weather condition JPN vs DEU">
        <e-chart-primaryxaxis title="Country" valueType="Category"></e-chart-primaryxaxis>
        <e-chart-primaryyaxis minimum="0" maximum="90" interval="20" labelFormat="{value}°F" title="Temperature (Fahrenheit)"></e-chart-primaryyaxis>
        <e-chart-rows>
            <e-chart-row height="50%"></e-chart-row>
            <e-chart-row height="50%"></e-chart-row>
        </e-chart-rows>
        <e-chart-axes>
            <e-chart-axis minimum="24" maximum="36" interval="2" opposedPosition="true" rowIndex="1" name="yAxis" labelFormat="{value}°C">
            </e-chart-axis>
        </e-chart-axes>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource"  name="Germany" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
            <e-series dataSource="ViewBag.dataSource"  name="Germany" xName="x" width="2" opacity="1" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line" yAxisName="yAxis"></e-series>
        </e-series-collection>
    </ejs-chart>

public ActionResult Index()
        {
            List<MultipleAxesChartData> chartData = new List<MultipleAxesChartData>
            {
                new MultipleAxesChartData{ x= "Jan", y= 15, y1= 33 },
                new MultipleAxesChartData{ x= "Feb", y= 20, y1= 31 },
                new MultipleAxesChartData{ x= "Mar", y= 35, y1= 30 },
                new MultipleAxesChartData{ x= "Apr", y= 40, y1= 28 },
                new MultipleAxesChartData{ x= "May", y= 80, y1= 29 },
                new MultipleAxesChartData{ x= "Jun", y= 70, y1= 30 },
                new MultipleAxesChartData{ x= "Jul", y= 65, y1= 33 }, 
                new MultipleAxesChartData{ x= "Aug", y= 55, y1= 32 },
                new MultipleAxesChartData{ x= "Sep", y= 50, y1= 34 },
                new MultipleAxesChartData{ x= "Oct", y= 30, y1= 32 },
                new MultipleAxesChartData{ x= "Nov", y= 35, y1= 32 },
                new MultipleAxesChartData{ x= "Dec", y= 35, y1= 31 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class MultipleAxesChartData
        {
            public string x;
            public double y;
            public double

For spanning the vertical axis along multiple row, you can use span property of an axis.

tagHelper

row-span.cs

<ejs-chart id="lineContainer" title="Weather condition JPN vs DEU">
        <e-chart-primaryxaxis title="Country" valueType="Category"></e-chart-primaryxaxis>
        <e-chart-primaryyaxis minimum="0" maximum="90" interval="20" labelFormat="{value}°F" title="Temperature (Fahrenheit)" span="2"></e-chart-primaryyaxis>
        <e-chart-rows>
            <e-chart-row height="50%"></e-chart-row>
            <e-chart-row height="50%"></e-chart-row>
        </e-chart-rows>
        <e-chart-axes>
            <e-chart-axis minimum="24" maximum="36" interval="2" opposedPosition="true" rowIndex="1" name="yAxis" labelFormat="{value}°C">
            </e-chart-axis>
        </e-chart-axes>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource"  name="Germany" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
            <e-series dataSource="ViewBag.dataSource"  name="Germany" xName="x" width="2" opacity="1" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line" yAxisName="yAxis"></e-series>
        </e-series-collection>
    </ejs-chart>

public ActionResult Index()
        {
            List<MultipleAxesChartData> chartData = new List<MultipleAxesChartData>
            {
                new MultipleAxesChartData{ x= "Jan", y= 15, y1= 33 },
                new MultipleAxesChartData{ x= "Feb", y= 20, y1= 31 },
                new MultipleAxesChartData{ x= "Mar", y= 35, y1= 30 },
                new MultipleAxesChartData{ x= "Apr", y= 40, y1= 28 },
                new MultipleAxesChartData{ x= "May", y= 80, y1= 29 },
                new MultipleAxesChartData{ x= "Jun", y= 70, y1= 30 },
                new MultipleAxesChartData{ x= "Jul", y= 65, y1= 33 }, 
                new MultipleAxesChartData{ x= "Aug", y= 55, y1= 32 },
                new MultipleAxesChartData{ x= "Sep", y= 50, y1= 34 },
                new MultipleAxesChartData{ x= "Oct", y= 30, y1= 32 },
                new MultipleAxesChartData{ x= "Nov", y= 35, y1= 32 },
                new MultipleAxesChartData{ x= "Dec", y= 35, y1= 31 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class MultipleAxesChartData
        {
            public string x;
            public double y;
            public double
        }

Columns

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

You can allocate space for each column 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.
To customize each column’s bottom line, use border property.

tagHelper

column.cs

<ejs-chart id="lineContainer" title="Weather condition JPN vs DEU">
        <e-chart-primaryxaxis title="Country" valueType="Category"></e-chart-primaryxaxis>
        <e-chart-primaryyaxis minimum="0" maximum="90" interval="20" labelFormat="{value}°F" title="Temperature (Fahrenheit)"></e-chart-primaryyaxis>
        <e-chart-columns>
            <e-chart-column height="50%"></e-chart-column>
            <e-chart-column height="50%"></e-chart-column>
        </e-chart-columns>
        <e-chart-axes>
            <e-chart-axis minimum="24" maximum="36" interval="2" opposedPosition="true" rowIndex="1" name="xAxis" labelFormat="{value}°C">
            </e-chart-axis>
        </e-chart-axes>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource"  name="Germany" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
            <e-series dataSource="ViewBag.dataSource"  name="Germany" xName="x" width="2" opacity="1" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line" xAxisName="xAxis"></e-series>
        </e-series-collection>
    </ejs-chart>

public ActionResult Index()
        {
            List<MultipleAxesChartData> chartData = new List<MultipleAxesChartData>
            {
                new MultipleAxesChartData{ x= "Jan", y= 15, y1= 33 },
                new MultipleAxesChartData{ x= "Feb", y= 20, y1= 31 },
                new MultipleAxesChartData{ x= "Mar", y= 35, y1= 30 },
                new MultipleAxesChartData{ x= "Apr", y= 40, y1= 28 },
                new MultipleAxesChartData{ x= "May", y= 80, y1= 29 },
                new MultipleAxesChartData{ x= "Jun", y= 70, y1= 30 },
                new MultipleAxesChartData{ x= "Jul", y= 65, y1= 33 }, 
                new MultipleAxesChartData{ x= "Aug", y= 55, y1= 32 },
                new MultipleAxesChartData{ x= "Sep", y= 50, y1= 34 },
                new MultipleAxesChartData{ x= "Oct", y= 30, y1= 32 },
                new MultipleAxesChartData{ x= "Nov", y= 35, y1= 32 },
                new MultipleAxesChartData{ x= "Dec", y= 35, y1= 31 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class MultipleAxesChartData
        {
            public string x;
            public double y;
            public double

For spanning the horizontal axis along multiple column, you can use span property of an axis.

tagHelper

column-span.cs

<ejs-chart id="lineContainer" title="Weather condition JPN vs DEU">
        <e-chart-primaryxaxis title="Country" valueType="Category" span="2"></e-chart-primaryxaxis>
        <e-chart-primaryyaxis minimum="0" maximum="90" interval="20" labelFormat="{value}°F" title="Temperature (Fahrenheit)"></e-chart-primaryyaxis>
        <e-chart-columns>
            <e-chart-column height="50%"></e-chart-column>
            <e-chart-column height="50%"></e-chart-column>
        </e-chart-columns>
        <e-chart-axes>
            <e-chart-axis minimum="24" maximum="36" interval="2" opposedPosition="true" rowIndex="1" name="xAxis" labelFormat="{value}°C">
            </e-chart-axis>
        </e-chart-axes>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource"  name="Germany" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
            <e-series dataSource="ViewBag.dataSource"  name="Germany" xName="x" width="2" opacity="1" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line" xAxisName="xAxis"></e-series>
        </e-series-collection>
    </ejs-chart>

public ActionResult Index()
        {
            List<MultipleAxesChartData> chartData = new List<MultipleAxesChartData>
            {
                new MultipleAxesChartData{ x= "Jan", y= 15, y1= 33 },
                new MultipleAxesChartData{ x= "Feb", y= 20, y1= 31 },
                new MultipleAxesChartData{ x= "Mar", y= 35, y1= 30 },
                new MultipleAxesChartData{ x= "Apr", y= 40, y1= 28 },
                new MultipleAxesChartData{ x= "May", y= 80, y1= 29 },
                new MultipleAxesChartData{ x= "Jun", y= 70, y1= 30 },
                new MultipleAxesChartData{ x= "Jul", y= 65, y1= 33 }, 
                new MultipleAxesChartData{ x= "Aug", y= 55, y1= 32 },
                new MultipleAxesChartData{ x= "Sep", y= 50, y1= 34 },
                new MultipleAxesChartData{ x= "Oct", y= 30, y1= 32 },
                new MultipleAxesChartData{ x= "Nov", y= 35, y1= 32 },
                new MultipleAxesChartData{ x= "Dec", y= 35, y1= 31 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class MultipleAxesChartData
        {
            public string x;
            public double y;
            public double

Contents

Rows
Columns

Contents

Rows
Columns

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!