Multiple Panes
28 Feb 202220 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.
<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.
<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.
<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.
<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