Contents
- Labels placement
- Range
- Indexed category axis
Having trouble getting help?
Contact Support
Contact Support
Category Axis in MVC 3D Chart component
9 Jan 20249 minutes to read
The category axis is the horizontal axis of a 3D chart that shows text values rather than numerical values. Compared to the vertical axis, this axis has fewer labels. The following sample shows to render the 3D chart using category axis.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { country= "USA", gold= 50 },
new ChartData { country= "China", gold= 40 },
new ChartData { country= "Japan", gold= 70 },
new ChartData { country= "Australia", gold= 60 },
new ChartData { country= "France", gold= 50 },
new ChartData { country= "Germany", gold= 40 },
new ChartData { country= "Italy", gold= 40 },
new ChartData { country= "Sweden", gold= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string country;
public double gold;
}
Labels placement
By default, category axis labels are placed between ticks in an axis. It can also be placed on ticks using the LabelPlacement
property.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" labelPlacement="@Syncfusion.EJ2.Charts.LabelPlacement.OnTicks"></e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { country= "USA", gold= 50 },
new ChartData { country= "China", gold= 40 },
new ChartData { country= "Japan", gold= 70 },
new ChartData { country= "Australia", gold= 60 },
new ChartData { country= "France", gold= 50 },
new ChartData { country= "Germany", gold= 40 },
new ChartData { country= "Italy", gold= 40 },
new ChartData { country= "Sweden", gold= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string country;
public double gold;
}
Range
The range of the category axis can be customized using Minimum
, Maximum
and Interval
properties of the axis.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" minimum="1" maximum="5" interval="2"></e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { country= "USA", gold= 50 },
new ChartData { country= "China", gold= 40 },
new ChartData { country= "Japan", gold= 70 },
new ChartData { country= "Australia", gold= 60 },
new ChartData { country= "France", gold= 50 },
new ChartData { country= "Germany", gold= 40 },
new ChartData { country= "Italy", gold= 40 },
new ChartData { country= "Sweden", gold= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string country;
public double gold;
}
Indexed category axis
The category axis can also be rendered based on the index values of the data source. This can be achieved by defining the IsIndexed
property to true in the axis.
<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
depth="100">
<e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" isIndexed="true"></e-chart3d-primaryxaxis>
<e-chart3d-series-collection>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
<e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="silver"
type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { country= "USA", gold= 50, silver= 70 },
new ChartData { country= "China", gold= 40, silver= 60 },
new ChartData { country= "Japan", gold= 70, silver= 60 },
new ChartData { country= "Australia", gold= 60, silver= 56 },
new ChartData { country= "France", gold= 50, silver= 45 },
new ChartData { country= "Germany", gold= 40, silver= 30 },
new ChartData { country= "Italy", gold= 40, silver= 35 },
new ChartData { country= "Sweden", gold= 30, silver= 25 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string country;
public double gold;
public double silver;
}