16 KiB
layout | title | description | platform | control | documentation |
---|---|---|---|---|---|
post | Callbacks in Flutter Pyramid Chart widget | Syncfusion | Learn here all about Callbacks feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. | flutter | Chart | ug |
Callbacks in Flutter Pyramid Chart (SfPyramidChart)
The below Callbacks are for Pyramid chart.
onLegendItemRender
Triggers when the legend item is rendering. Here, you can customize the legend’s text, and shape. The onLegendItemRender
Callback contains the following arguments.
text
- specifies the content of the legend.pointIndex
- specifies the current point index that is applicable for Pyramid chart type alone.seriesIndex
- specifies the current series index.legendIconType
- specifies the shape of the legend.color
- to get and set the color of the legend icon.
{% highlight dart %}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfPyramidChart(
legend: Legend(isVisible: true),
onLegendItemRender: (LegendRenderArgs args){
args.text = 'Legend Text';
args.legendIconType = LegendIconType.diamond;
}
)
)
);
}
{% endhighlight %}
onTooltipRender
Triggers while tooltip is rendering. Here, you can customize the text, header, x and y-positions. The onTooltipRender
Callback contains the following arguments.
text
- specifies the content of the tooltip.header
- specifies the header content of the tooltip.locationX
- specifies the x position of tooltip.locationY
- specifies the y position of tooltip.seriesIndex
- specifies the current series index.dataPoints
- holds the data point collection.pointIndex
- specifies the current point index.viewportPointIndex
- to get the viewport index value of the tapped data label.
{% highlight dart %}
late TooltipBehavior _tooltipBehavior;
@override
void initState(){
_tooltipBehavior = TooltipBehavior(enable: true);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfPyramidChart(
onTooltipRender: (TooltipArgs args){
args.text = 'Custom Text';
},
tooltipBehavior: _tooltipBehavior,
)
)
);
}
{% endhighlight %}
onDataLabelRender
Triggers when data label is rendering. Text and text styles such as color, font size, and font weight can be customized. The onDataLabelRender
Callback contains the following arguments.
text
- specifies the content of the data label.textStyle
- used to change the text color, size, font family, font style, and font weight.pointIndex
- specifies the current point index.seriesRenderer
- specifies current series.viewportPointIndex
- to get the viewport index value of the tapped data label.color
- to get and set the color of data label.
{% highlight dart %}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfPyramidChart(
onDataLabelRender:(DataLabelRenderArgs args){
args.text = 'Data label';
},
series: PyramidSeries<ChartData, String>(
dataLabelSettings: DataLabelSettings(
isVisible: true
)
)
)
)
);
}
{% endhighlight %}
onLegendTapped
Triggers when tapping the legend item. The onLegendTapped
Callback contains the following arguments.
seriesIndex
- specifies the current series index.pointIndex
- specifies the current point index that is applicable for Pyramid series.series
- specifies the current series.
{% highlight dart %}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfPyramidChart(
onLegendTapped: (LegendTapArgs args) {
print(args.seriesIndex);
},
legend: Legend(isVisible: true)
)
);
}
{% endhighlight %}
onSelectionChanged
Triggers while selection changes. Here you can customize the selectedColor, unselectedColor, selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth properties. The onSelectionChanged
Callback contains the following arguments.
seriesRenderer
- specifies current series.seriesIndex
- specifies the current series index.pointIndex
- specifies the current point index.selectedColor
- specifies color of the selected data points or series.unselectedColor
- specifies color of the unselected data points or series.selectedBorderColor
- specifies border color of the selected data points or series.selectedBorderWidth
- specifies border width of the selected data points or series.unselectedBorderColor
- specifies border color of the unselected data points or series.unselectedBorderWidth
- specifies border width of the unselected data points or series.viewportPointIndex
- to get the viewport index value of the tapped data label
{% highlight dart %}
late electionBehavior _selectionBehavior;
@override
void initState(){
_selectionBehavior = SelectionBehavior(
enable: true);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfPyramidChart(
onSelectionChanged: (SelectionArgs args){
args.selectedColor = Colors.red;
args.unselectedColor = Colors.lightGreen;
},
series: PyramidSeries<ChartData, String>(
selectionBehavior: _selectionBehavior
)
)
)
);
}
{% endhighlight %}
onDataLabelTapped
Triggers when tapping on the data label of the data point in the series. The onDataLabelTapped
Callback contains the following arguments.
position
- specifies the position of the tapped data label in logical pixels.seriesIndex
- specifies the series index of the tapped data labelpointIndex
- specifies the point index of the tapped data label.text
- specifies the content of the tapped data label.dataLabelSettings
- to get the data label customization options specified in that particular series.viewportPointIndex
- to get the viewport index value of the tapped data label.
NOTE: This callback will not be called, when the builder is specified for data label (data label template). For this case, custom widget specified in the
builder
property can be wrapped using theGestureDetector
and this functionality can be achieved in the application level.
{% highlight dart %}
@override
Widget build(BuildContext context) {
return Container(
child: SfPyramidChart(
onDatalabelTapped: (DataLabelTapArgs args) {
print(args.seriesIndex);
},
series: PyramidSeries<Sample, DateTime>(
dataSource: sample,
xValueMapper: (Sample sales, _) => sales.x,
yValueMapper: (Sample sales, _) => sales.y,
dataLabelSettings: DataLabelSettings(
isVisible:true
),
)
)
);
}
{% endhighlight %}
onPointTap
Triggers when tapping on the series point. The onPointTap
callback contains the following arguments.
seriesIndex
- specifies the current series index.pointIndex
- specifies the current point index.dataPoints
- holds the data point collection.viewportPointIndex
- specifies the viewport index value of the tapped data point.
{% highlight dart %}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfPyramidChart(
series: PyramidSeries<Sample, DateTime>(
onPointTap: (ChartPointDetails details) {
print(details.pointIndex);
print(details.seriesIndex);
}
)
)
)
);
}
{% endhighlight %}
onPointDoubleTap
Triggers when double-tap the series point. The onPointDoubleTap
callback contains the following arguments.
seriesIndex
- specifies the current series index.pointIndex
- specifies the current point index.dataPoints
- holds the data point collection.viewportPointIndex
- specifies the viewport index value of the double-tapped data point.
{% highlight dart %}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfPyramidChart(
series: PyramidSeries<Sample, DateTime>(
onPointDoubleTap: (ChartPointDetails details) {
print(details.pointIndex);
print(details.seriesIndex);
}
)
)
)
);
}
{% endhighlight %}
onPointLongPress
Triggers when long press on the series point. The onPointLongPress
callback contains the following arguments.
seriesIndex
- specifies the current series index.pointIndex
- specifies the current point index.dataPoints
- holds the data point collection.viewportPointIndex
- specifies the viewport index value of the long pressed data point.
{% highlight dart %}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfPyramidChart(
series: PyramidSeries<Sample, DateTime>(
onPointLongPress: (ChartPointDetails details) {
print(details.pointIndex);
print(details.seriesIndex);
}
)
)
)
);
}
{% endhighlight %}