Series label in ASP.NET Core Chart component

18 Nov 201824 minutes to read

The series label displays the name of each series inline, positioned near the end of the series path or the last visible data point. This helps identify each series without referring to the legend.

Overview

Enable series labels using the LabelSettings property within the series configuration. Set the Visible property to true to display the label.

CSHTML

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-chart-legendsettings visible="true"></e-chart-legendsettings>
    <e-series-collection>
        <e-series dataSource="ViewBag.vietnamData"
                  xName="x"
                  yName="y"
                  name="Vietnam"
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
            <e-series-labelsettings visible="true"></e-series-labelsettings>
        </e-series>
        <e-series dataSource="ViewBag.indonesiaData"
                  xName="x"
                  yName="y"
                  name="Indonesia"
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
            <e-series-labelsettings visible="true"></e-series-labelsettings>
        </e-series>
        <e-series dataSource="ViewBag.franceData"
                  xName="x"
                  yName="y"
                  name="France"
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
            <e-series-labelsettings visible="true"></e-series-labelsettings>
        </e-series>
        <e-series dataSource="ViewBag.polandData"
                  xName="x"
                  yName="y"
                  name="Poland"
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
            <e-series-labelsettings visible="true"></e-series-labelsettings>
        </e-series>
        <e-series dataSource="ViewBag.mexicoData"
                  xName="x"
                  yName="y"
                  name="Mexico"
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
            <e-series-labelsettings visible="true"></e-series-labelsettings>
        </e-series>
    </e-series-collection>
</ejs-chart>

Series-label.cs

public ActionResult SeriesLabel()
{
    List<ChartData> vietnamData = new List<ChartData>
    {
        new ChartData { x = 2016, y = 7.8 },
        new ChartData { x = 2017, y = 10.3 },
        new ChartData { x = 2018, y = 15.5 },
        new ChartData { x = 2019, y = 17.5 },
        new ChartData { x = 2020, y = 19.5 },
        new ChartData { x = 2021, y = 23.0 },
        new ChartData { x = 2022, y = 20.0 },
        new ChartData { x = 2023, y = 19.0 },
        new ChartData { x = 2024, y = 22.1 }
    };

    List<ChartData> indonesiaData = new List<ChartData>
    {
        new ChartData { x = 2016, y = 4.8 },
        new ChartData { x = 2017, y = 5.2 },
        new ChartData { x = 2018, y = 6.2 },
        new ChartData { x = 2019, y = 7.8 },
        new ChartData { x = 2020, y = 9.3 },
        new ChartData { x = 2021, y = 14.3 },
        new ChartData { x = 2022, y = 15.6 },
        new ChartData { x = 2023, y = 16.0 },
        new ChartData { x = 2024, y = 17.0 }
    };

    List<ChartData> franceData = new List<ChartData>
    {
        new ChartData { x = 2016, y = 14.6 },
        new ChartData { x = 2017, y = 15.5 },
        new ChartData { x = 2018, y = 15.4 },
        new ChartData { x = 2019, y = 14.4 },
        new ChartData { x = 2020, y = 11.6 },
        new ChartData { x = 2021, y = 13.9 },
        new ChartData { x = 2022, y = 12.1 },
        new ChartData { x = 2023, y = 10.0 },
        new ChartData { x = 2024, y = 10.8 }
    };

    List<ChartData> polandData = new List<ChartData>
    {
        new ChartData { x = 2016, y = 8.9 },
        new ChartData { x = 2017, y = 10.3 },
        new ChartData { x = 2018, y = 10.8 },
        new ChartData { x = 2019, y = 9.0 },
        new ChartData { x = 2020, y = 7.9 },
        new ChartData { x = 2021, y = 8.5 },
        new ChartData { x = 2022, y = 7.4 },
        new ChartData { x = 2023, y = 6.4 },
        new ChartData { x = 2024, y = 7.1 }
    };

    List<ChartData> mexicoData = new List<ChartData>
    {
        new ChartData { x = 2016, y = 19.0 },
        new ChartData { x = 2017, y = 20.0 },
        new ChartData { x = 2018, y = 20.2 },
        new ChartData { x = 2019, y = 18.4 },
        new ChartData { x = 2020, y = 16.8 },
        new ChartData { x = 2021, y = 18.5 },
        new ChartData { x = 2022, y = 18.4 },
        new ChartData { x = 2023, y = 16.3 },
        new ChartData { x = 2024, y = 13.7 }
    };

    ViewBag.vietnamData = vietnamData;
    ViewBag.indonesiaData = indonesiaData;
    ViewBag.franceData = franceData;
    ViewBag.polandData = polandData;
    ViewBag.mexicoData = mexicoData;
    return View();
}

public class ChartData
{
    public double x;
    public double y;
}

Customization

Customize the appearance of series labels using the following properties:

• Text
• Font
• Background
• Border
• Opacity
• ShowOverlapText

CSHTML

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-chart-legendsettings visible="true"></e-chart-legendsettings>
    <e-series-collection>
        <e-series dataSource="ViewBag.vietnamData"
                  xName="x"
                  yName="y"
                  name="Vietnam"
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
            <e-series-labelsettings visible="true"
                                    text="Vietnam"
                                    background="#E8F5E9"
                                    opacity="0.9"
                                    showOverlapText="true">
            </e-series-labelsettings>
        </e-series>
        <e-series dataSource="ViewBag.indonesiaData"
                  xName="x"
                  yName="y"
                  name="Indonesia"
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
            <e-series-labelsettings visible="true"
                                    text="Indonesia"
                                    background="#FFF3E0"
                                    opacity="0.9"
                                    showOverlapText="true">
            </e-series-labelsettings>
        </e-series>
        <e-series dataSource="ViewBag.franceData"
                  xName="x"
                  yName="y"
                  name="France"
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
            <e-series-labelsettings visible="true"
                                    text="France"
                                    background="#E3F2FD"
                                    opacity="0.9"
                                    showOverlapText="true">
            </e-series-labelsettings>
        </e-series>
        <e-series dataSource="ViewBag.polandData"
                  xName="x"
                  yName="y"
                  name="Poland"
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
            <e-series-labelsettings visible="true"
                                    text="Poland"
                                    background="#F3E5F5"
                                    opacity="0.9"
                                    showOverlapText="true">
            </e-series-labelsettings>
        </e-series>
        <e-series dataSource="ViewBag.mexicoData"
                  xName="x"
                  yName="y"
                  name="Mexico"
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
            <e-series-labelsettings visible="true"
                                    text="Mexico"
                                    background="#FBE9E7"
                                    opacity="0.9"
                                    showOverlapText="true">
            </e-series-labelsettings>
        </e-series>
    </e-series-collection>
</ejs-chart>

Series-label-customization.cs

public ActionResult SeriesLabelCustomization()
{
    List<ChartData> vietnamData = new List<ChartData>
    {
        new ChartData { x = 2016, y = 7.8 },
        new ChartData { x = 2017, y = 10.3 },
        new ChartData { x = 2018, y = 15.5 },
        new ChartData { x = 2019, y = 17.5 },
        new ChartData { x = 2020, y = 19.5 },
        new ChartData { x = 2021, y = 23.0 },
        new ChartData { x = 2022, y = 20.0 },
        new ChartData { x = 2023, y = 19.0 },
        new ChartData { x = 2024, y = 22.1 }
    };

    List<ChartData> indonesiaData = new List<ChartData>
    {
        new ChartData { x = 2016, y = 4.8 },
        new ChartData { x = 2017, y = 5.2 },
        new ChartData { x = 2018, y = 6.2 },
        new ChartData { x = 2019, y = 7.8 },
        new ChartData { x = 2020, y = 9.3 },
        new ChartData { x = 2021, y = 14.3 },
        new ChartData { x = 2022, y = 15.6 },
        new ChartData { x = 2023, y = 16.0 },
        new ChartData { x = 2024, y = 17.0 }
    };

    List<ChartData> franceData = new List<ChartData>
    {
        new ChartData { x = 2016, y = 14.6 },
        new ChartData { x = 2017, y = 15.5 },
        new ChartData { x = 2018, y = 15.4 },
        new ChartData { x = 2019, y = 14.4 },
        new ChartData { x = 2020, y = 11.6 },
        new ChartData { x = 2021, y = 13.9 },
        new ChartData { x = 2022, y = 12.1 },
        new ChartData { x = 2023, y = 10.0 },
        new ChartData { x = 2024, y = 10.8 }
    };

    List<ChartData> polandData = new List<ChartData>
    {
        new ChartData { x = 2016, y = 8.9 },
        new ChartData { x = 2017, y = 10.3 },
        new ChartData { x = 2018, y = 10.8 },
        new ChartData { x = 2019, y = 9.0 },
        new ChartData { x = 2020, y = 7.9 },
        new ChartData { x = 2021, y = 8.5 },
        new ChartData { x = 2022, y = 7.4 },
        new ChartData { x = 2023, y = 6.4 },
        new ChartData { x = 2024, y = 7.1 }
    };

    List<ChartData> mexicoData = new List<ChartData>
    {
        new ChartData { x = 2016, y = 19.0 },
        new ChartData { x = 2017, y = 20.0 },
        new ChartData { x = 2018, y = 20.2 },
        new ChartData { x = 2019, y = 18.4 },
        new ChartData { x = 2020, y = 16.8 },
        new ChartData { x = 2021, y = 18.5 },
        new ChartData { x = 2022, y = 18.4 },
        new ChartData { x = 2023, y = 16.3 },
        new ChartData { x = 2024, y = 13.7 }
    };

    ViewBag.vietnamData = vietnamData;
    ViewBag.indonesiaData = indonesiaData;
    ViewBag.franceData = franceData;
    ViewBag.polandData = polandData;
    ViewBag.mexicoData = mexicoData;
    return View();
}

public class ChartData
{
    public double x;
    public double y;
}