Title in ASP.NET MVC Accumulation Chart Component

8 Apr 202524 minutes to read

Accumulation Chart can be given a title using Title property, to show the information about the data plotted.

@Html.EJS().AccumulationChart("container").Title("Oil and other liquid imports in USA").LegendSettings(ls => ls.Visible(false)).Series(series =>
                        {
                            series.DataLabel(dl => dl.Visible(true).Name("text"))
                                  .XName("xValue")
                                  .YName("yValue")
                                  .Name("Browser")
                                  .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                                  .DataSource(ViewBag.dataSource).Add();
                        }).Render()
public ActionResult Pie()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Saudi Arabia", yValue = 58, text = "58%"},
                new PieChartData { xValue = "Persian Gulf", yValue = 15, text = "15%"},
                new PieChartData { xValue = "Canada", yValue = 13, text = "13%"},
                new PieChartData { xValue = "Venezuela", yValue = 8 , text = "8%"},
                new PieChartData { xValue = "Mexico", yValue = 3 , text = "3%"},
                new PieChartData { xValue = "Russia", yValue = 2, text = "2%"},
                new PieChartData { xValue = "Miscellaneous", yValue = 1, text = "1%"}    
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
            public string text;
        }

Title customization

Accumulation Chart can be customized a title using TitleStyle property.

@Html.EJS().AccumulationChart("container").Title("Oil and other liquid imports in USA").SubTitle("In the year 2014 - 2015")
                        .LegendSettings(ls => ls.Visible(false)).TitleStyle(Sts => Sts.FontFamily("Arial").FontStyle("italic").FontWeight("regular").Color("#E27F2D").Size("23px")).
                        Series(series =>
                        {
                            series.DataLabel(dl => dl.Visible(true).Name("text"))
                                  .XName("xValue")
                                  .YName("yValue")
                                  .Name("Browser")
                                  .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                                  .DataSource(ViewBag.dataSource).Add();
                        }).Render()
public ActionResult Pie()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Saudi Arabia", yValue = 58, text = "58%"},
                new PieChartData { xValue = "Persian Gulf", yValue = 15, text = "15%"},
                new PieChartData { xValue = "Canada", yValue = 13, text = "13%"},
                new PieChartData { xValue = "Venezuela", yValue = 8 , text = "8%"},
                new PieChartData { xValue = "Mexico", yValue = 3 , text = "3%"},
                new PieChartData { xValue = "Russia", yValue = 2, text = "2%"},
                new PieChartData { xValue = "Miscellaneous", yValue = 1, text = "1%"}    
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
            public string text;
        }

Position

The Position property customizes the placement of the accumulation chart title. It supports the following options: Right, Left, Bottom, Top, and Custom. The custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements.

@Html.EJS().AccumulationChart("container").Series(series =>
        {
            series.XName("XValue")
                .YName("YValue")
                .DataLabel(dl => dl.Visible(true).Name("Text").Font(ft => ft.Color("white")))
                .DataSource(ViewBag.dataSource)
                .Add();
        }
        ).LegendSettings(ls => ls.Visible(false)
        ).TitleStyle(Sts => Sts.FontFamily("Arial").FontStyle("italic").FontWeight("regular").Color("#E27F2D").Size("23px").Position(Syncfusion.EJ2.Charts.TitlePosition.Bottom)
        ).Title("Oil and other liquid imports in USA").SubTitle("In the year 2014 - 2015").Render()
public ActionResult Pie()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { XValue = "Saudi Arabia",  YValue = 58,  Text = "58%" },
                new PieChartData { XValue = "Persian Gulf",  YValue = 15,  Text = "15%" },
                new PieChartData { XValue = "Canada",        YValue = 13,  Text = "13%" },
                new PieChartData { XValue = "Venezuela",     YValue = 8 ,  Text = "8%" },
                new PieChartData { XValue = "Mexico",        YValue = 3 ,  Text = "3%" },
                new PieChartData { XValue = "Russia",        YValue = 2,   Text = "2%" },
                new PieChartData { XValue = "Miscellaneous", YValue = 1,   Text = "1%" }    
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string XValue;
            public double YValue;
            public string Text;
        }

SubTitle

Accumulation Chart can be given a subtitle using SubTitle property, to show the information about the data plotted.

@Html.EJS().AccumulationChart("container").Title("Oil and other liquid imports in USA").SubTitle("In the year 2014 - 2015").LegendSettings(ls => ls.Visible(false)).Series(series =>
                        {
                            series.DataLabel(dl => dl.Visible(true).Name("text"))
                                  .XName("xValue")
                                  .YName("yValue")
                                  .Name("Browser")
                                  .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                                  .DataSource(ViewBag.dataSource).Add();
                        }).Render()
public ActionResult Pie()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Saudi Arabia", yValue = 58, text = "58%"},
                new PieChartData { xValue = "Persian Gulf", yValue = 15, text = "15%"},
                new PieChartData { xValue = "Canada", yValue = 13, text = "13%"},
                new PieChartData { xValue = "Venezuela", yValue = 8 , text = "8%"},
                new PieChartData { xValue = "Mexico", yValue = 3 , text = "3%"},
                new PieChartData { xValue = "Russia", yValue = 2, text = "2%"},
                new PieChartData { xValue = "Miscellaneous", yValue = 1, text = "1%"}    
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
            public string text;
        }

SubTitle customization

Accumulation Chart can be customized a subtitle using SubTitleStyle property.

@Html.EJS().AccumulationChart("container").Title("Oil and other liquid imports in USA").SubTitle("In the year 2014 - 2015")
                        .LegendSettings(ls => ls.Visible(false)).SubTitleStyle(Sts => Sts.FontFamily("Arial").FontStyle("italic").FontWeight("regular").Color("#E27F2D").Size("13px")).
                        Series(series =>
                        {
                            series.DataLabel(dl => dl.Visible(true).Name("text"))
                                  .XName("xValue")
                                  .YName("yValue")
                                  .Name("Browser")
                                  .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                                  .DataSource(ViewBag.dataSource).Add();
                        }).Render()
public ActionResult Pie()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Saudi Arabia", yValue = 58, text = "58%"},
                new PieChartData { xValue = "Persian Gulf", yValue = 15, text = "15%"},
                new PieChartData { xValue = "Canada", yValue = 13, text = "13%"},
                new PieChartData { xValue = "Venezuela", yValue = 8 , text = "8%"},
                new PieChartData { xValue = "Mexico", yValue = 3 , text = "3%"},
                new PieChartData { xValue = "Russia", yValue = 2, text = "2%"},
                new PieChartData { xValue = "Miscellaneous", yValue = 1, text = "1%"}    
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
            public string text;
        }

Position

The Position property customizes the placement of the accumulation chart subtitle. It supports the following options: Right, Left, Bottom, Top, and Custom. The custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements.

@Html.EJS().AccumulationChart("container").Series(series =>
        {
            series.XName("XValue")
                .YName("YValue")
                .DataLabel(dl => dl.Visible(true).Name("Text").Font(ft => ft.Color("white")))
                .DataSource(ViewBag.dataSource)
                .Add();
        }
        ).LegendSettings(ls => ls.Visible(false)
        ).TitleStyle(Sts => Sts.FontFamily("Arial").FontStyle("italic").FontWeight("regular").Color("#E27F2D").Size("23px").Position(Syncfusion.EJ2.Charts.TitlePosition.Bottom)
        ).Title("Oil and other liquid imports in USA").SubTitle("In the year 2014 - 2015").Render()
public ActionResult Pie()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { XValue = "Saudi Arabia",  YValue = 58,  Text = "58%" },
                new PieChartData { XValue = "Persian Gulf",  YValue = 15,  Text = "15%" },
                new PieChartData { XValue = "Canada",        YValue = 13,  Text = "13%" },
                new PieChartData { XValue = "Venezuela",     YValue = 8 ,  Text = "8%" },
                new PieChartData { XValue = "Mexico",        YValue = 3 ,  Text = "3%" },
                new PieChartData { XValue = "Russia",        YValue = 2,   Text = "2%" },
                new PieChartData { XValue = "Miscellaneous", YValue = 1,   Text = "1%" }    
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string XValue;
            public double YValue;
            public string Text;
        }