Appearance in ASP.NET MVC 3D Chart Component

9 Jan 202424 minutes to read

Custom color palette

The default color of series or points can be customized by providing a custom color palette of your choice by using the Palettes 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").
      Name("Gold").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("silver").
      Name("Silver").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("bronze").
      Name("Bronze").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   ).Title("Olympic Medals")
   .Palettes(new string[] { "#E94649", "#F6B53F", "#6FAAB0", "#C4C24A" })
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50, silver= 70, bronze= 45 },
        new ChartData { country= "China",     gold= 40, silver= 60, bronze= 55 },
        new ChartData { country= "Japan",     gold= 70, silver= 60, bronze= 50 },
        new ChartData { country= "Australia", gold= 60, silver= 56, bronze= 40 },
        new ChartData { country= "France",    gold= 50, silver= 45, bronze= 35 },
        new ChartData { country= "Germany",   gold= 40, silver= 30, bronze= 22 },
        new ChartData { country= "Italy",     gold= 40, silver= 35, bronze= 37 },
        new ChartData { country= "Sweden",    gold= 30, silver= 25, bronze= 27 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
    public double silver;
    public double bronze;
}

Data point customization

The color of an individual data point can be customized using the below options.

Point color mapping

The color for the points can be bound from the DataSource for the series by utilizing the PointColorMapping 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("x").
      YName("y").
      PointColorMapping("color").
      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 { x= "Jan", y= 6.96, color= "#ed4c40" },
        new ChartData { x= "Feb", y= 8.9,  color= "#3285f3" },
        new ChartData { x= "Mar", y= 12,   color= "#1dd7f3" },
        new ChartData { x= "Apr", y= 17.5, color= "#fe1684" },
        new ChartData { x= "May", y= 22.1, color= "#4633f2" }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public string color;
}

Point level customization

The data label and fill color of each data point can be customized using the PointRender and TextRender events.

@(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")
   .PointRender("pointRender")
   .Render())

<script>
   var colors = ["#00bdae", "#404041", "#357cd2", "#e56590", "#f8b883",
      "#70ad47", "#dd8abd", "#7f84e8", "#7bb4eb", "#ea7a57"];

   function pointRender(args) {
      args.fill = colors[args.point.index];
   }
</script>
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;
}

Chart area customization

Customize the chart background

The background color and border of the 3D chart can be customized using the Background and Border properties.

@(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")
   .Background("skyblue")
   .Border( br=> br.Color("#FF0000").Width(2))
   .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;
}

Chart margin

The 3D chart’s margin can be set from its container using the Margin 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)
   ).Title("Olympic Medals")
   .Background("skyblue")
   .Border( br=> br.Color("#FF0000").Width(2))
   .Margin(mr => mr.Left(40).Right(40).Top(40).Bottom(40))
   .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;
}

Animation

To customize the animation for a particular series, the Animation property can be used. It can be enabled or disabled by using the Enable property. The Duration property specifies the duration of an animation and the Delay property allows us to start the animation at desire time.

@(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").
      Animation(an => an.Enable(true).Duration(2000).Delay(200)).
      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;
}

Chart rotation

The 3D Chart can be roatated by using the EnableRotation 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)
   ).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;
}

Title

The 3D chart can be given a title by using Title property, to show the information about the data plotted.

@(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;
}

Title position

By using the Position property in TitleStyle, the Title can be positioned at left, right, top or bottom of the 3D chart. The title is positioned at the top of the 3D chart, by default.

@(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").TitleStyle(ts => ts.Position(Syncfusion.EJ2.Charts.TitlePosition.Bottom))
   .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;
}

The custom option is used to position the title anywhere in the 3D chart using X and Y coordinates.

@(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").TitleStyle(ts => ts.Position(Syncfusion.EJ2.Charts.TitlePosition.Custom).X(300).Y(60))
   .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;
}

Title alignment

The title can be aligned to the near, far, or center of the 3D chart by using the TextAlignment 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)
   ).Title("Olympic Medals").TitleStyle(ts => ts.TextAlignment(Syncfusion.EJ2.Charts.Alignment.Far))
   .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;
}

Title customization

The TitleStyle property of the 3D chart provides options to customize the title by using the following properties.

  • Size - Specifies the size of the title.
  • Color - Specifies the color for the title.
  • FontFamily - Specifies the font family for the title.
  • FontWeight - Specifies the font weight of the title.
  • FontStyle - Specifies the font style for the title.
  • Opacity - Specifies the opacity for the color of the title.
  • TextAlignment - Specifies the alignment of the title.
  • TextOverflow - Specifies the overflow of the title.
@(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").TitleStyle(ts => ts.Size("18px").Color("red").TextOverflow(Syncfusion.EJ2.Charts.TextOverflow.Wrap))
   .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;
}