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.
@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 }
};
}
Using Position
property, you can place the label either on Top
, Middle
, Bottom
or Outer
.
@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 }
};
}
Note: The position Outer
is applicable for column and bar type series.
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 from the data source can be mapped to data label using Name
property.
@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" }
};
}
Margin
can be applied to the data label to create space around the element.
@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" }
};
}
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.
@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" }
};
}
Note: You can refer to our
Blazor Charts
feature tour page for its groundbreaking feature representations. You can also explore ourBlazor Chart example
to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.