Data label in Flutter Funnel Chart (SfFunnelChart)

13 May 202114 minutes to read

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 to near, center and far.
  • 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 Funnel data label positions. The available options to customize the positions are outer, auto, top, bottom and middle.
  • borderRadius - used to add the rounded corners to the data label shape.
  • angle - used to rotate the labels.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfFunnelChart(
                            series: FunnelSeries<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
                                    )
                                )
                        )
                    )
                )
            );
        }

    DataLabel

    Label position

    The labelAlignment property is used to position the Funnel 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 Funnel series data labels either inside or outside. By default the label of Funnel chart is placed inside the series.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfFunnelChart(
                            series: FunnelSeries<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
                                    )
                                )
                        )
                    )
                )
            );
        }

    Data label position

    NOTE

    The labelAlignment property is used to position the Funnel chart labels whereas labelPosition property is used to position the Funnel 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.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfFunnelChart(
                            series: FunnelSeries<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
                                    )
                                )
                        )
                    )
                )
            );
        }

    Series color

    Hide data label for 0 value

    Data label and its connector line in the Funnel charts for the point value 0 can be hidden using the showZeroValue property. This defaults to true.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                        child:SfFunnelChart(
                            series: FunnelSeries<SalesData, num>(
                                dataSource: [
                                    SalesData(11, 35),
                                    SalesData(12, 28),
                                    SalesData(13, 0),
                                    SalesData(14, 32),
                                    SalesData(15, 40)
                                ],
                                xValueMapper: (SalesData sales, _) => sales.xValue,
                                yValueMapper: (SalesData sales, _) => sales.yValue,
                                dataLabelSettings: DataLabelSettings(
                                    showZeroValue: false,
                                    isVisible: true
                                ),
                            )
                        )
                )
            );
        }

    hide_0_value

    Data label saturation color

    If the user didn’t provide text color to the data label, then by default, the saturation color is applied to the data label text. i.e., if the data points background color intensity is dark, then the data label will render in white color (#FFFFFF) and if the data points background color intensity is light, data label will render in black color (#000000).

    label_saturation