Data labels in ASP.NET MVC 3D Chart Component

9 Jan 202417 minutes to read

Data labels are fields that includes information about the sample point connected to an output. It can be added to a chart series by enabling the Visible property in the DataLabel. By default, the labels will arrange smartly without overlapping.

CSHTML

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataLabel(dl => dl.Visible(true)).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .Title("Olympic Medals")
   .Render())

Datalabel.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50 },
        new ChartData { country= "China",     gold= 40 },
        new ChartData { country= "Japan",     gold= 70 },
        new ChartData { country= "Australia", gold= 60 },
        new ChartData { country= "France",    gold= 50 },
        new ChartData { country= "Germany",   gold= 40 },
        new ChartData { country= "Italy",     gold= 40 },
        new ChartData { country= "Sweden",    gold= 30 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}

Position

The Position property is used to place the label either on Top, Middle, or Bottom.

CSHTML

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.Chart3DDataLabelPosition.Middle)).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .Title("Olympic Medals")
   .Render())

Position.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50 },
        new ChartData { country= "China",     gold= 40 },
        new ChartData { country= "Japan",     gold= 70 },
        new ChartData { country= "Australia", gold= 60 },
        new ChartData { country= "France",    gold= 50 },
        new ChartData { country= "Germany",   gold= 40 },
        new ChartData { country= "Italy",     gold= 40 },
        new ChartData { country= "Sweden",    gold= 30 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}

Template

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

CSHTML

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataLabel(dl => dl.Visible(true).Template("<div style=\"border: 1px solid black; padding: 3px 3px 3px 3px\"><div>${point.x}</div><div>${point.y}</div></div>")).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .Title("Olympic Medals")
   .Render())

Template.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50 },
        new ChartData { country= "China",     gold= 40 },
        new ChartData { country= "Japan",     gold= 70 },
        new ChartData { country= "Australia", gold= 60 },
        new ChartData { country= "France",    gold= 50 },
        new ChartData { country= "Germany",   gold= 40 },
        new ChartData { country= "Italy",     gold= 40 },
        new ChartData { country= "Sweden",    gold= 30 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}

Text mapping

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

CSHTML

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("x").
      YName("y").
      DataLabel(dl => dl.Visible(true).Name("text")).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .Title("Olympic Medals")
   .Render())

Mapping.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "Jan", y= 12, text= "January : 12°C" },
        new ChartData { x= "Feb", y= 8,  text= "February : 8°C" },
        new ChartData { x= "Mar", y= 11, text= "March : 11°C"   },
        new ChartData { x= "Apr", y= 6,  text= "April : 6°C"    }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public string text;
}

Format

Data label for the chart can be formatted using the Format property. The global formatting options can be used as ‘n’, ‘p’, and ‘c’.

CSHTML

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataLabel(dl => dl.Visible(true).Format("n2")).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .Title("Olympic Medals")
   .Render())

Format.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50 },
        new ChartData { country= "China",     gold= 40 },
        new ChartData { country= "Japan",     gold= 70 },
        new ChartData { country= "Australia", gold= 60 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}

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.

Margin

The Margin for data label can be applied by using Left, Right, Bottom and Top properties.

CSHTML

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataLabel(dl => dl.Visible(true).Border(br => br.Width(1).Color("red"))
        .Margin(mg => mg.Top(5).Left(5).Right(5).Bottom(5))).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .Title("Olympic Medals")
   .Render())

Margin.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50 },
        new ChartData { country= "China",     gold= 40 },
        new ChartData { country= "Japan",     gold= 70 },
        new ChartData { country= "Australia", gold= 60 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}

Customization

The Stroke and Border of data label can be customized using Fill and Border properties.

CSHTML

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataLabel(dl => dl.Visible(true).Border(br => br.Width(2).Color("red"))).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .Title("Olympic Medals")
   .Render())

Custom.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50 },
        new ChartData { country= "China",     gold= 40 },
        new ChartData { country= "Japan",     gold= 70 },
        new ChartData { country= "Australia", gold= 60 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}

Customizing specific label

A specific label can be customized by using the TextRender event. The TextRender event allows you to change the label text for the point.

CSHTML

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataLabel(dl => dl.Visible(true)).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .Title("Olympic Medals")
   .TextRender("textRender")
   .Render())

<script>
   function textRender(args) {
      if (args.point.index === 2) {
         args.text = 'Label';
      }
      else {
         args.cancel = true;
      }
   }
</script>

Series-percentage.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",  gold= 46 },
        new ChartData { country= "GBR",  gold= 27 },
        new ChartData { country= "CHN",  gold= 26 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}