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
(outer is applicable for column and bar type series).
@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="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 points x & y value.
Using Template
property, you can set data label template
in chart.
Text from the data source can be mapped 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
for data label can be applied to using Left
, Right
, Bottom
and Top
properties.
@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" }
};
}
Stroke
and Border
of data label can be customized using Fill
and Border
properties. Rounded corners can be customized using Rx
and Ry
properties.
@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: Rx
and Ry
properties requires Border
values not to be null.