Category axis in ASP.NET 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.

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   ).Title("Olympic Medals")
   .Render())
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.

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).LabelPlacement(Syncfusion.EJ2.Charts.LabelPlacement.OnTicks)
   ).Title("Olympic Medals")
   .Render())
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.

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Minimum(1).Maximum(5).Interval(2)
   ).Title("Olympic Medals")
   .Render())
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 caategory 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.

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("silver").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).IsIndexed(true)
   ).Title("Olympic Medals")
   .Render())
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;
}