Data label in SfPyramid Charts
Data label can be added to a chart series by enabling the isVisible
option in the dataLabelSettings
. You can use the following properties to customize the appearance.
-
color
– used to change the background color of the data label shape. -
borderWidth
– used to change the stroke width of the data label shape. -
borderColor
– used to change the stroke color of the data label shape. -
alignment
- aligns the data label text tonear
,center
andfar
. -
textStyle
– used to change the data label text color, size, font family, font style, and font weight. -
color
– used to change the color of the data label. -
fontFamily
- used to change the font family for the data label. -
fontStyle
- used to change the font style for the data label. -
fontWeight
- used to change the font weight for the data label. -
fontSize
- used to change the font size for the data label. -
margin
- used to change the margin size for data labels. -
opacity
- used to control the transparency of the data label. -
labelAlignment
- used to align the Pyramid data label positions. The available options to customize the positions areouter
,auto
,top
,bottom
andmiddle
. -
borderRadius
- used to add the rounded corners to the data label shape. -
angle
- used to rotate the labels.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfPyramidChart(
series: PyramidSeries<SalesData, String>(
dataSource: chartData,
pointColorMapper: (SalesData data, _) => data.color,
xValueMapper: (SalesData data, _) => data.x,
yValueMapper: (SalesData data, _) => data.y,
dataLabelSettings: DataLabelSettings(
// Renders the data label
isVisible: true
)
)
)
)
)
);
}
Label position
The labelAlignment
property is used to position the Pyramid chart type data labels at top
, bottom
, auto
, outer
and middle
position of the actual data point position. By default, labels are auto
positioned. You can move the labels horizontally and vertically using OffsetX and OffsetY properties respectively.
The labelPosition
property is used to place the Pyramid series data labels either inside
or outside
. By default the label of Pyramid chart is placed inside
the series.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfPyramidChart(
series: PyramidSeries<SalesData, String>(
dataSource: chartData,
xValueMapper: (SalesData data, _) => data.x,
yValueMapper: (SalesData data, _) => data.y,
dataLabelSettings: DataLabelSettings(
isVisible: true,
// Positioning the data label
labelPosition: ChartDataLabelPosition.outside
)
)
)
)
)
);
}
NOTE
The
labelAlignment
property is used to position the Pyramid chart labels whereaslabelPosition
property is used to position the Pyramid chart labels.
Apply series color
The useSeriesColor
property is used to apply the series color to background color of the data labels. The default value of this property is false.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfPyramidChart(
series: PyramidSeries<SalesData, String>(
dataSource: chartData,
xValueMapper: (SalesData data, _) => data.x,
yValueMapper: (SalesData data, _) => data.y,
dataLabelSettings: DataLabelSettings(
isVisible: true,
// Positioning the data label
labelPosition: ChartDataLabelPosition.outside,
// Renders background rectangle and fills it with series color
useSeriesColor: true
)
)
)
)
)
);
}
Label template
You can customize the appearance of the data label with your own template using the builder
property of dataLabelSettings
.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfPyramidChart(
series: PyramidSeries<SalesData, String>(
dataSource: chartData,
xValueMapper: (SalesData data, _) => data.x,
yValueMapper: (SalesData data, _) => data.y,
dataLabelSettings: DataLabelSettings(
isVisible: true,
// Templating the data label
builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) {
return Container(
height: 30,
width: 30,
child: Image.asset('images/livechart.png')
);
}
)
)
)
)
)
);
}