Data Label in ASP.NET CORE 3D Circular Chart Component

18 Mar 202419 minutes to read

A data label refers to a label associated with specific data points. It can be added to a 3D Circular Chart series by enabling the Visible option in the DataLabel property. By default, the labels will arrange themselves smartly to avoid overlapping.

<ejs-circularchart3d id="container" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
            <e-circularchart3d-series-datalabel visible="true">
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Jan",  Y = 13 },
        new CircularChartData { X = "Feb",  Y = 13.5 },
        new CircularChartData { X = "Mar",  Y = 7 },
        new CircularChartData { X = "Apr",  Y = 13.5 }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
}

Positioning

Using the Position property, we can place the data label either Inside or Outside the 3D Circular Chart.

<ejs-circularchart3d id="container" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
            <e-circularchart3d-series-datalabel visible="true" position="@Syncfusion.EJ2.Charts.CircularChart3DLabelPosition.Outside">
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Jan",  Y = 13 },
        new CircularChartData { X = "Feb",  Y = 13 },
        new CircularChartData { X = "Mar",  Y = 17 },
        new CircularChartData { X = "Apr",  Y = 13.5 }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
}

Data label template

The label content can be formatted using the template option. Inside the template, placeholder text ${point.x} and ${point.y can be added to display the corresponding data point’s x & y value. The data label template can be set using the Template property.

<ejs-circularchart3d id="container" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
            <e-circularchart3d-series-datalabel visible="true" name="Text"
                template="<div id='templateWrap' style='background-color:#bd18f9;border-radius: 3px; float: right;padding: 2px;line-height: 20px;text-align: center;'>"+ "<img src='https://ej2.syncfusion.com/demos/src/chart/images/sunny.png' />" + "<div style='color:white; font-family:Roboto; font-style: medium; fontp-size:14px;float: right;padding: 2px;line-height: 20px;text-align: center;padding-right:6px'><span>${point.y}</span></div></div>">
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Jan",  Y = 13, Text = "Jan: 13" },
        new CircularChartData { X = "Feb",  Y = 13, Text = "Feb: 13" },
        new CircularChartData { X = "Mar",  Y = 17, Text = "Mar: 17" },
        new CircularChartData { X = "Apr",  Y = 13.5, Text = "Apr: 13.5" }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
    public string Text;
}

Connector line

The connector line will be visible when the data label is placed Outside the chart. It can be customized using properties such as Color, Width, Length, and DashArray within the ConnectorStyle property.

<ejs-circularchart3d id="container" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
            <e-circularchart3d-series-datalabel visible="true" name="Text" position="@Syncfusion.EJ2.Charts.CircularChart3DLabelPosition.Outside">
                <e-connectorStyle length="50px" width="2" color="#f4429e" dashArray="5,3">
                </e-connectorStyle>
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Jan",  Y = 13, Text = "Jan: 13" },
        new CircularChartData { X = "Feb",  Y = 13, Text = "Feb: 13" },
        new CircularChartData { X = "Mar",  Y = 17, Text = "Mar: 17" },
        new CircularChartData { X = "Apr",  Y = 13.5, Text = "Apr: 13.5" }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
    public string Text;
}

Text mapping

Text from the data source can be mapped using the Name property within the data label.

<ejs-circularchart3d id="container" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
            <e-circularchart3d-series-datalabel visible="true" name="Text">
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Jan",  Y = 3, Text = "January" },
        new CircularChartData { X = "Feb",  Y = 3.5, Text = "February" },
        new CircularChartData { X = "Mar",  Y = 7, Text = "March" },
        new CircularChartData { X = "Apr",  Y = 13.5, Text = "April" }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
    public string Text;
}

Format

The data label for the 3D Circular Chart can be formatted using the Format property. You can utilize global formatting options such as ‘n’, ‘p’, and ‘c’.

<ejs-circularchart3d id="container" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
            <e-circularchart3d-series-datalabel visible="true" format="n2">
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Jan",  Y = 13 },
        new CircularChartData { X = "Feb",  Y = 13 },
        new CircularChartData { X = "Mar",  Y = 7 },
        new CircularChartData { X = "Apr",  Y = 13 }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
}
Value Format Resultant Value Description
1000 n1 1000.0 The number is rounded to 1 decimal place.
1000 n2 1000.00 The number is rounded to 2 decimal places.
1000 n3 1000.000 The number is rounded to 3 decimal place.
0.01 p1 1.0% The number is converted to percentage with 1 decimal place.
0.01 p2 1.00% The number is converted to percentage with 2 decimal place.
0.01 p3 1.000% The number is converted to percentage with 3 decimal place.
1000 c1 $1000.0 The currency symbol is appended to number and number is rounded to 1 decimal place.
1000 c2 $1000.00 The currency symbol is appended to number and number is rounded to 2 decimal place.

Customization

Individual text for the data points in the 3D Circular Chart can be customized using the TextRender event.

<ejs-circularchart3d id="container" tilt="-45" textRender="textRender">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
            <e-circularchart3d-series-datalabel visible="true" name="Text" position="@Syncfusion.EJ2.Charts.CircularChart3DLabelPosition.Outside">
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>

<script>
    var textRender = function(args) {
        if (args.text.indexOf('Mar') > -1) {
            args.color = 'red';
            args.border.width = 1;
        }
    }
</script>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Jan",  Y = 13, Text = "Jan: 13" },
        new CircularChartData { X = "Feb",  Y = 13, Text = "Feb: 13" },
        new CircularChartData { X = "Mar",  Y = 17, Text = "Mar: 17" },
        new CircularChartData { X = "Apr",  Y = 13.5, Text = "Apr: 13.5" }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
    public string Text;
}

Using textRender event

You can customize the data label of a pie chart using the TextRender event as follows to show the percentage.

<ejs-circularchart3d id="container" tilt="-45" textRender="textRender">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
            <e-circularchart3d-series-datalabel visible="true">
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>

<script>
    var textRender = function(args) {
        args.text = args.point.percentage + "%";
    }
</script>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Jan",  Y = 13 },
        new CircularChartData { X = "Feb",  Y = 13.5 },
        new CircularChartData { X = "Mar",  Y = 7 },
        new CircularChartData { X = "Apr",  Y = 13.5 }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
}

Using template

You can display the percentage values in the data label of a pie chart using the Template option.

<ejs-circularchart3d id="container" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
            <e-circularchart3d-series-datalabel visible="true" template="<div id='dataLabelTemplate'>${point.percentage}%</div>">
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Jan",  Y = 13 },
        new CircularChartData { X = "Feb",  Y = 13.5 },
        new CircularChartData { X = "Mar",  Y = 7 },
        new CircularChartData { X = "Apr",  Y = 13.5 }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
}