Center label in ASP.NET CORE Accumulation Chart Component

4 Jun 20245 minutes to read

Center label

Using centerLabel it is now possible to place a label at the center of a pie or doughnut chart. To configure the default text rendered on the center label for the pie and doughnut charts, use the text property in the centerLabel.

@{
    List<PieChartData> chartData = new List<PieChartData>
    {
        new PieChartData { x = "Chrome", y = 61.3, text = "Chrome: 61.3%"},
        new PieChartData { x = "Safari", y = 24.6, text = "Safari: 24.6%"},
        new PieChartData { x = "Edge", y = 5.0, text = "Edge: 5.0%"},
        new PieChartData { x = "Samsung Internet", y = 2.7, text = "Samsung Internet: 2.7%"},
        new PieChartData { x = "Firefox", y = 2.6, text = "Firefox: 2.6%"},
        new PieChartData { x = "Others", y = 3.6, text = "Others: 3.6%"}
    };
}

<ejs-accumulationchart id="container">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="chartData" xName="x" yName="y" innerRadius="65%">
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-centerlabel text="Mobile<br>Browsers<br>Statistics">
    </e-accumulationchart-centerlabel>
    <e-accumulationchart-legendsettings visible="false">
    </e-accumulationchart-legendsettings>
</ejs-accumulationchart>
...
public class PieChartData
{
    public string x;
    public double y;
    public string text;
}

Hover text

The default text in the center label can be changed when the mouse pointer hovers over the pie and doughnut charts slice using the hoverTextFormat property.

@{
    List<PieChartData> chartData = new List<PieChartData>
    {
        new PieChartData { x = "Chrome", y = 61.3, text = "Chrome: 61.3%"},
        new PieChartData { x = "Safari", y = 24.6, text = "Safari: 24.6%"},
        new PieChartData { x = "Edge", y = 5.0, text = "Edge: 5.0%"},
        new PieChartData { x = "Samsung Internet", y = 2.7, text = "Samsung Internet: 2.7%"},
        new PieChartData { x = "Firefox", y = 2.6, text = "Firefox: 2.6%"},
        new PieChartData { x = "Others", y = 3.6, text = "Others: 3.6%"}
    };
}

<ejs-accumulationchart id="container">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="chartData" xName="x" yName="y" innerRadius="65%">
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-centerlabel text="Mobile<br>Browsers<br>Statistics"
                                     hoverTextFormat="${point.x} <br> Browser Share <br> ${point.y}%">
    </e-accumulationchart-centerlabel>
    <e-accumulationchart-legendsettings visible="false">
    </e-accumulationchart-legendsettings>
...
public class PieChartData
{
    public string x;
    public double y;
    public string text;
}

Customization

Customize the center label text using the textStyle property.

@{
    List<PieChartData> chartData = new List<PieChartData>
    {
        new PieChartData { x = "Chrome", y = 61.3, text = "Chrome: 61.3%"},
        new PieChartData { x = "Safari", y = 24.6, text = "Safari: 24.6%"},
        new PieChartData { x = "Edge", y = 5.0, text = "Edge: 5.0%"},
        new PieChartData { x = "Samsung Internet", y = 2.7, text = "Samsung Internet: 2.7%"},
        new PieChartData { x = "Firefox", y = 2.6, text = "Firefox: 2.6%"},
        new PieChartData { x = "Others", y = 3.6, text = "Others: 3.6%"}
    };
}

<ejs-accumulationchart id="container">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="chartData" xName="x" yName="y" innerRadius="65%">
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-centerlabel text="Mobile<br>Browsers<br>Statistics" hoverTextFormat="${point.x} <br> Browser Share <br> ${point.y}%">
        <e-centerlabel-textstyle fontWeight="900" size="15px" color="grey" fontFamily="Roboto" fontStyle="Italic"></e-centerlabel-textstyle>
    </e-accumulationchart-centerlabel>
    <e-accumulationchart-legendsettings visible="false">
    </e-accumulationchart-legendsettings>
</ejs-accumulationchart>
...
public class PieChartData
{
    public string x;
    public double y;
    public string text;
}