Chart area can be divided into multiple panes using rows
and
columns
.
To split the chart area vertically into number of rows, use rows
property of the chart.
height
property. The value can be either in percentage or in pixel.rowIndex
property of the axis.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
}
To split the chart area horizontally into number of columns, use columns
property of the chart.
width
property. The given width can be either in percentage or in pixel.columnIndex
property of the axis.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