Title in ASP.NET CORE Accumulation Chart Component

4 Jun 20247 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;
}

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