Customize the background color of data label template from webservice

17 Mar 20228 minutes to read

Bind the text and interior information for a point from dataSource. To change the background color in the datalabel template, use ${point.text}. You have to bind the property from dataSource to name in the data label options to use point.text.

Follow the given steps to customize the background color of data label template from webservice, which includes colors:

Step 1: Get the data from webservice, which also includes color attribute to bind the name in the data label options to use point.text in the data label template.

To get data from web service, use any adaptor webApi or Url adaptor in the data manager, and then bind the data manager to the dataSource property in the series options.

@Html.EJS().Chart("container").Series(
           series =>
           {
               series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).
               XName("Year").YName("yValue").DataSource("dataManager").
               Query("query").Add();
           }).PrimaryXAxis(
                px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).
                      EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
            ).Render()

<script>
    var dataManager = new ej.data.DataManager({
        url: 'http://localhost:54290/api/Values',
        adaptor: new ej.data.WebApiAdaptor
    });
    var query = new ej.data.Query();
</script>
// get the data from here
public object Get()
        {
            List<EmployeeModel> revenue = new List<EmployeeModel>();
            revenue.Add(new EmployeeModel() { Year = "2018-06-13T00:00:00", yValue = 30, color = "red" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-14T00:00:00", yValue = 20, color = "blue" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-15T00:00:00", yValue = 15, color = "green" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-16T00:00:00", yValue = 30, color = "orange" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-17T00:00:00", yValue = 60, color = "skyblue" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-18T00:00:00", yValue = 10, color = "red" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-19T00:00:00", yValue = 70, color = "yellow" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-20T00:00:00", yValue = 50, color = "pink" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-21T00:00:00", yValue = 88, color = "green" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-22T00:00:00", yValue = 35, color = "blue" });

            return new { Items = revenue, Count = revenue.Count() };
}

public class EmployeeModel
{
    public string Year { get; set; }
    public double yValue { get; set; }
    public string color { get; set; }
}

Step 2: Initialize the data label template <div> as demonstrated in the following html page.

<script id="index" type="text/x-template">
    <div id='templateWrap' style="background-color: ${point.text}; border-radius: 3px;">
        <img src="http://icons.iconarchive.com/icons/icons8/ios7/256/Astrology-Air-Element-icon.png" style="height: 25px;width: 25px" title="Air">
        <div class='des' style="color:black; font-family:Roboto; font-style: normal; font-size:16px;padding-right:6px">
            <span style="color:white;">${point.y}</span>
        </div>
    </div>
</script>

Step 3: To show the data label template, set the element id to the template property in data label.

 @Html.EJS().Chart("container").Series(
           series =>
           {
               series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).
               XName("Year").YName("yValue").DataSource("dataManager").
               Query("query").Marker(mark => mark.Visible(true).DataLabel(dl => dl.Visible(true).
               Position(Syncfusion.EJ2.Charts.LabelPosition.Top).Name("color").Template("#index"))).Add();
           }).PrimaryXAxis(
                px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).
                      EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
            ).PrimaryYAxis(
                py => py.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).
                      Interval(20).Minimum(0).Maximum(100)
            ).Render()
<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime" EdgeLabelPlacement = "@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift">
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis RangePadding="@Syncfusion.EJ2.Charts.ChartRangePadding.None" Interval="20" Minimum="0" Maximum="100">
    </e-chart-primaryyaxis>
    <e-series-collection>
        <e-series Name="color" dataManager="dataManager" xName="Year" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true" height="10" width="10">
                <e-series-datalabel visible="true" position="@Syncfusion.EJ2.Charts.LabelPosition.Top" template="#index"></e-series-datalabel>
            </e-series-marker>
        </e-series>
    </e-series-collection>
</ejs-chart>

<script id="index" type="text/x-template">
    <div id='templateWrap' style="background-color: ${point.text}; border-radius: 3px;">
        <img src="http://icons.iconarchive.com/icons/icons8/ios7/256/Astrology-Air-Element-icon.png" style="height: 25px;width: 25px" title="Air">
        <div class='des' style="color:black; font-family:Roboto; font-style: normal; font-size:16px;padding-right:6px">
            <span style="color:white;">${point.y}</span>
        </div>
    </div>
</script>
<script>
    var dataManager = new ej.data.DataManager({
        url: 'http://localhost:54290/api/Values',
        adaptor: new ej.data.WebApiAdaptor
    });
    var query = new ej.data.Query();
</script>
public ActionResult Index()
        {
            return View();
        }

Sample: Customize the background color of data label is available in chart sample.