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