Title in ASP.NET CORE Accumulation Chart Component

8 Apr 202514 minutes to read

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

@{
    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%"}
    };
}

<ejs-accumulationchart id="container" title="Oil and other liquid imports in USA">
    <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="chartData" xName="xValue" yName="yValue">
            <e-accumulationseries-datalabel name="text" visible="true">
            </e-accumulationseries-datalabel>
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
    public string xValue;
    public double yValue;
    public string text;
}

Title customization

Accumulation Chart can be customized a title using titleStyle property.

@{
    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%"}
    };
}

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

<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 visible="true" name="Text">
                <e-font color="white"></e-font>
            </e-accumulationseries-datalabel>
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-titlestyle fontFamily="Arial" fontStyle="italic" fontWeight="regular" color="#E27F2D" size="23px" position="@Syncfusion.EJ2.Charts.TitlePosition.Bottom">
    </e-accumulationchart-titlestyle>
</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.

@{
    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%"}
    };
}

<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="chartData" xName="xValue" yName="yValue">
            <e-accumulationseries-datalabel name="text" visible="true">
            </e-accumulationseries-datalabel>
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class PieChartData
{
    public string xValue;
    public double yValue;
    public string text;
}

SubTitle customization

Accumulation Chart can be customized a subtitle using subTitleStyle property.

@{
    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%"}
    };
}

<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="chartData" xName="xValue" yName="yValue">
            <e-accumulationseries-datalabel name="text" visible="true">
            </e-accumulationseries-datalabel>
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>
...
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.

<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 visible="true" name="Text">
                <e-font color="white"></e-font>
            </e-accumulationseries-datalabel>
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-titlestyle fontFamily="Arial" fontStyle="italic" fontWeight="regular" color="#E27F2D" size="23px" position="@Syncfusion.EJ2.Charts.TitlePosition.Bottom">
    </e-accumulationchart-titlestyle>
</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;
        }