ASP.NET Core
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Title and Subtitle in ASP.NET Core Accumulation Chart control

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

tagHelper
title.cs
<ejs-accumulationchart id="container" title="Oil and other liquid imports in USA" subTitle="In the year 2014 - 2015">
           <e-accumulationchart-titlestyle fontFamily="Arial" fontStyle="italic" fontWeight="regular" color="#E27F2D" size="23px">
         </e-accumulationchart-titlestyle>
            <e-accumulationchart-legendsettings visible="false">
            </e-accumulationchart-legendsettings>
            <e-accumulation-series-collection>
                <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue">
                    <e-accumulationseries-datalabel name="text" visible="true">
                    </e-accumulationseries-datalabel>
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
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.

tagHelper
title.cs
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
            <e-accumulationchart-legendsettings visible="false">
            </e-accumulationchart-legendsettings>
            <e-accumulation-series-collection>
                <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser">
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
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.

tagHelper
<ejs-accumulationchart id="container" title="Oil and other liquid imports in USA" subTitle="In the year 2014 - 2015">
            <e-accumulationchart-legendsettings visible="false">
            </e-accumulationchart-legendsettings>
            <e-accumulation-series-collection>
                <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue">
                    <e-accumulationseries-datalabel name="text" visible="true">
                    </e-accumulationseries-datalabel>
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>

SubTitle Customization

Accumulation Chart can be customized a subtitle using subTitleStyle property.

tagHelper
<ejs-accumulationchart id="container" title="Oil and other liquid imports in USA" subTitle="In the year 2014 - 2015">
           <e-accumulationchart-subtitlestyle fontFamily="Arial" fontStyle="italic" fontWeight="regular" color="#E27F2D" size="13px">
         </e-accumulationchart-subtitlestyle>
            <e-accumulationchart-legendsettings visible="false">
            </e-accumulationchart-legendsettings>
            <e-accumulation-series-collection>
                <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue">
                    <e-accumulationseries-datalabel name="text" visible="true">
                    </e-accumulationseries-datalabel>
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
Previous
Next