Center label in ASP.NET MVC Accumulation Chart Component

3 Apr 202310 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.

Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("x")
                      .YName("y")
                      .InnerRadius("65%").Add();
            })
            .CenterLabel(cl => cl.Text("Mobile<br>Browsers<br>Statistics"))
            .LegendSettings(ls => ls.Visible(false)).Render()
public ActionResult Index()
        {
            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%"}
            };
            ViewBag.dataSource = chartData;
            return View();
        }
         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.

Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("x")
                      .YName("y")
                      .InnerRadius("65%").Add();
            })
            .CenterLabel(cl => cl.Text("Mobile<br>Browsers<br>Statistics")
            .HoverTextFormat("${point.x} <br> Browser Share <br> ${point.y}%"))
            .LegendSettings(ls => ls.Visible(false)).Render()
public ActionResult Index()
        {
            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%"}
            };
            ViewBag.dataSource = chartData;
            return View();
        }
         public class PieChartData
        {
            public string x;
            public double y;
            public string text;
        }

Customization

Customize the center label text using the TextStyle property.

Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("x")
                      .YName("y")
                      .InnerRadius("65%").Add();
            })
            .CenterLabel(cl => cl.Text("Mobile<br>Browsers<br>Statistics")
            .HoverTextFormat("${point.x} <br> Browser Share <br> ${point.y}%")
            .TextStyle(ts => ts.FontWeight("900").Size("15px").Color("grey").FontFamily("Roboto").FontStyle("Italic")))
            .LegendSettings(ls => ls.Visible(false)).Render()
public ActionResult Index()
        {
            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%"}
            };
            ViewBag.dataSource = chartData;
            return View();
        }
         public class PieChartData
        {
            public string x;
            public double y;
            public string text;
        }