Flutter-docs/Flutter/pyramid-chart/datalabel.md

layout	title	description	platform	control	documentation
post	Data label in Flutter Pyramid Chart widget | Syncfusion	Learn here all about Data label feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.	flutter	Chart	ug

Data label in Flutter Pyramid Chart (SfPyramidChart)

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 ChartAlignment.near, ChartAlignment.center and ChartAlignment.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 Pyramid data label positions. The available options to customize the positions are ChartDataLabelAlignment.outer, ChartDataLabelAlignment.auto, ChartDataLabelAlignment.top, ChartDataLabelAlignment.bottom and ChartDataLabelAlignment.middle.
• borderRadius - used to add the rounded corners to the data label shape.
• angle - used to rotate the labels.
• offset - used to move the data label vertically or horizontally from its position.
• showCumulativeValues - to show the cumulative values in stacked type series charts.
• labelIntersectAction - action on data labels intersection. The intersecting data labels can be hidden.

{% highlight dart %}

@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
                            )
                        )
                )
            )
        )
    );
}

{% endhighlight %}

Connector line

This feature is used to connect label and data point using a line. It can be enabled for PyramidSeries chart type. The connectorLineSettings property used to customize the connector line.

• color - used to change the color of the line
• width - used to change the stroke thickness of the line
• length - specifies the length of the connector line.
• type - specifies the shape of connector line either ConnectorType.curve or ConnectorType.line.

{% highlight dart %}

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
                child: SfPyramidChart(
                    series: <PyramidSeries>[
                        PyramidSeries<ChartData, double>(
                            enableSmartLabels: true,
                            dataSource: chartData,
                            xValueMapper: (ChartData data, _) => data.x,
                            yValueMapper: (ChartData data, _) => data.y,
                            dataLabelSettings: DataLabelSettings(
                                isVisible: true,
                                labelPosition: ChartDataLabelPosition.outside,
                                connectorLineSettings: ConnectorLineSettings(
                                    // Type of the connector line
                                    type: ConnectorType.curve
                                )
                            )
                        )
                    ]
                )
            )
        )
    );
}

{% endhighlight %}

Positioning the labels

The labelAlignment property is used to position the Pyramid chart type data labels at ChartDataLabelAlignment.top, ChartDataLabelAlignment.bottom, ChartDataLabelAlignment.auto, ChartDataLabelAlignment.outer and ChartDataLabelAlignment.middle position of the actual data point position. By default, labels are ChartDataLabelAlignment.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 ChartDataLabelPosition.inside or ChartDataLabelPosition.outside. By default the label of Pyramid chart is placed ChartDataLabelPosition.inside the series.

{% highlight dart %}

@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
                            )
                        )
                )
            )
        )
    );
}

{% endhighlight %}

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

{% highlight dart %}

@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
                            )
                        )
                )
            )
        )
    );
}

{% endhighlight %}

Templating the labels

You can customize the appearance of the data label with your own template using the builder property of dataLabelSettings.

{% highlight dart %}

@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')
                                    );
                                }
                            )
                        )
                )
            )
        )
    );
}

{% endhighlight %}

Hide data label for 0 value

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

{% highlight dart %}

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
                child:SfPyramidChart(
                    series: PyramidSeries<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
                        ),
                    )
                )
        )
    );
}

{% endhighlight %}

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).