Data Labels in Blazor Chart component

28 Jul 2021 / 2 minutes to read

Data label can be added to a chart series by enabling the Visible option in the data label. By default, the labels will arrange smartly without overlapping.

datalabel.razor

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true"/>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class Data
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public List<Data> WeatherReports = new List<Data>
{
        new Data{ X= "Jan", Y= 3 },
        new Data{ X= "Feb", Y= 3.5 },
        new Data{ X= "Mar", Y= 7 },
        new Data{ X= "Apr", Y= 13.5 }
    };
}

Data Labels

Position

Using Position property, you can place the label either on Top, Middle, Bottom or Outer.

position.razor

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true" Position="Position="Syncfusion.Blazor.Charts.LabelPosition.Middle"/>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class Data
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public List<Data> WeatherReports = new List<Data>
    {
        new Data{ X= "Jan", Y= 3 },
        new Data{ X= "Feb", Y= 3.5 },
        new Data{ X= "Mar", Y= 7 },
        new Data{ X= "Apr", Y= 13.5 }
    };
}

Position

Note: The position Outer is applicable for column and bar type series.

Data label template

Label content can be formatted by using the Template option. Inside the template, you can add the placeholder text ${point.x} and ${point.y} to display corresponding data point value.

Text Mapping

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

mapping.razor

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true" Name="Text"></ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class Data
    {
        public string X { get; set; }
        public double Y { get; set; }
        public string Text { get; set; }
    }

    public List<Data> WeatherReports = new List<Data> {
           new Data{ X= "Jan", Y= 3, Text= "January" },
           new Data{ X= "Feb", Y= 3.5, Text= "February" },
           new Data{ X= "Mar", Y= 7, Text= "March" },
           new Data{ X= "Apr", Y= 13.5, Text= "April" }
        };
}

Text Mapping

Margin

Margin can be applied to the data label to create space around the element.

margin.razor

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true" Name="Text">
                    <ChartDataLabelBorder Width="2" Color="red"/>
                    <ChartDataLabelMargin Left="15" Right="15" Top="15" Bottom="15"/>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class Data
    {
        public string X { get; set; }
        public double Y { get; set; }
        public string Text { get; set; }
    }

    public List<Data> WeatherReports = new List<Data> {
           new Data{ X= "Jan", Y= 3, Text= "January" },
           new Data{ X= "Feb", Y= 3.5, Text= "February" },
           new Data{ X= "Mar", Y= 7, Text= "March" },
           new Data{ X= "Apr", Y= 13.5, Text= "April" }
        };
}

Margin

Customization

Data label can be further customized using Fill and Border properties. Rounded corners can be customized using Rx and Ry properties. Rx and Ry properties requires Border values not to be null.

custom.razor

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>   

    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" >
            <ChartMarker>
                <ChartDataLabel Visible="true" Name="Text" Rx="10" Ry="10">
                    <ChartDataLabelBorder Width="2" Color="red"></ChartDataLabelBorder>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class Data
    {
        public string X { get; set; }
        public double Y { get; set; }
        public string Text { get; set; }
    }

    public List<Data> WeatherReports = new List<Data> {
           new Data{ X= "Jan", Y= 3, Text= "January" },
           new Data{ X= "Feb", Y= 3.5, Text= "February" },
           new Data{ X= "Mar", Y= 7, Text= "March" },
           new Data{ X= "Apr", Y= 13.5, Text= "April" }
        };
}

Customization

Note: You can refer to our Blazor Charts feature tour page for its groundbreaking feature representations. You can also explore our Blazor Chart example to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.

Data Labels in Blazor Chart component

Position

Data label template

Text Mapping

Margin

Customization

See Also