Data label can be added to a point by enabling the Visible
option in the DataLabel property.
@using Syncfusion.Blazor.Charts
<SfAccumulationChart Title="Mobile Browser Statistics" EnableSmartLabels="true">
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Name="Browser">
<AccumulationDataLabelSettings Visible="true" Name="Browser"></AccumulationDataLabelSettings>
</AccumulationChartSeries>
</AccumulationChartSeriesCollection>
</SfAccumulationChart>
@code{
public class Statistics
{
public string Browser { get; set;}
public double Users { get; set; }
public string Text { get; set; }
public string Fill { get; set; }
}
public List<Statistics> StatisticsDetails = new List<Statistics>
{
new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff"},
new Statistics { Browser = "UC Browser", Users = 17, Text= "17%", Fill="#ffa060"},
new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6"},
new Statistics { Browser = "Others", Users = 4 , Text= "4%", Fill="#81e2a1"},
};
}
Accumulation chart provides support for placing the data label either Inside
or Outside
of the chart by using Position
property.
@using Syncfusion.Blazor.Charts
<SfAccumulationChart Title="Mobile Browser Statistics">
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Name="Browser">
<AccumulationDataLabelSettings Visible="true" Name="Browser" Position="AccumulationLabelPosition.Outside"></AccumulationDataLabelSettings>
</AccumulationChartSeries>
</AccumulationChartSeriesCollection>
</SfAccumulationChart>
@code{
public class Statistics
{
public string Browser { get; set; }
public double Users { get; set; }
public string Text { get; set; }
public string Fill { get; set; }
}
public List<Statistics> StatisticsDetails = new List<Statistics>
{
new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff"},
new Statistics { Browser = "UC Browser", Users = 17, Text= "17%", Fill="#ffa060"},
new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6"},
new Statistics { Browser = "Others", Users = 4 , Text= "4%", Fill="#81e2a1"},
};
}
Datalabels will be arranged smartly without overlapping with each other. You can enable or disable this feature using
the EnableSmartLabels
property.
@using Syncfusion.Blazor.Charts
<SfAccumulationChart EnableSmartLabels="true">
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Country" YName="Users">
<AccumulationDataLabelSettings Visible="true" Name="Country" Position="AccumulationLabelPosition.Outside">
<AccumulationChartConnector Type="ConnectorType.Curve" Length="20px" />
</AccumulationDataLabelSettings>
</AccumulationChartSeries>
</AccumulationChartSeriesCollection>
</SfAccumulationChart>
@code{
public class Statistics
{
public string Country { get; set; }
public double Users { get; set; }
}
public List<Statistics> StatisticsDetails = new List<Statistics>
{
new Statistics { Country = "China", Users = 1409517397 },
new Statistics { Country = "India", Users = 1339180127 },
new Statistics { Country = "United States", Users = 324459463 },
new Statistics { Country = "Indonesia", Users = 263991379 },
new Statistics { Country = "Brazil", Users = 209288278 },
new Statistics { Country = "Pakistan", Users = 197015955 },
new Statistics { Country = "Nigeria", Users = 190886311 },
new Statistics { Country = "Bangladesh", Users = 164669751 },
new Statistics { Country = "Russia", Users = 143989754 },
new Statistics { Country = "Mexico", Users = 129163276 },
new Statistics { Country = "Japan", Users = 127484450 },
new Statistics { Country = "Ethiopia", Users = 104957438 },
new Statistics { Country = "Philippines", Users = 104918090 },
new Statistics { Country = "Egypt", Users = 97553151 },
new Statistics { Country = "Vietnam", Users = 95540800 },
new Statistics { Country = "Germany", Users = 82114224 },
};
}
Connector line will be visible when the data label is placed Outside
the chart.
The connector line can be customized using the Type
, Color
, Width
, Length
and DashArray
properties
@using Syncfusion.Blazor.Charts
<SfAccumulationChart Title="Mobile Browser Statistics" EnableSmartLabels="true">
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Name="Browser">
<AccumulationDataLabelSettings Visible="true" Name="Text" Position="AccumulationLabelPosition.Outside">
<AccumulationChartConnector Color="#f4429e" Length="50px" Width="2" Type="ConnectorType.Curve" DashArray="5,3"></AccumulationChartConnector>
</AccumulationDataLabelSettings>
</AccumulationChartSeries>
</AccumulationChartSeriesCollection>
</SfAccumulationChart>
@code{
public class Statistics
{
public string Browser;
public double Users;
public string Text;
public string Fill;
}
public List<Statistics> StatisticsDetails = new List<Statistics>
{
new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff"},
new Statistics { Browser = "UC Browser", Users = 17, Text= "17%", Fill="#ffa060"},
new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6"},
new Statistics { Browser = "Others", Users = 4 , Text= "4%", Fill="#81e2a1"},
};
}
Text from the data source can be mapped to data label using Name
property.
@using Syncfusion.Blazor.Charts
<SfAccumulationChart Title="Mobile Browser Statistics" EnableSmartLabels="true">
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Name="Browser">
<AccumulationDataLabelSettings Visible="true" Name="Text">
</AccumulationDataLabelSettings>
</AccumulationChartSeries>
</AccumulationChartSeriesCollection>
</SfAccumulationChart>
@code{
public class Statistics
{
public string Browser;
public double Users;
public string Text;
public string Fill;
}
public List<Statistics> StatisticsDetails = new List<Statistics>
{
new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff"},
new Statistics { Browser = "UC Browser", Users = 17, Text= "17%", Fill="#ffa060"},
new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6"},
new Statistics { Browser = "Others", Users = 4 , Text= "4%", Fill="#81e2a1"},
};
}