CODEWITHSUNDEEP
fluttersyncfusionsyncfusion-chart
Adnan haider
Adnan haider

Reputation: 553

Remove Extra Spaces between title and doughnut chart and legend in flutter

I am using syncfusion circular chart in which i have set doughnut chart type which give me extra spaces between title, chart and legends. how to reduce the extra spaces between them?

enter image description here

here is code which set these

      Expanded(
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8), // if you need this
                side: BorderSide(
                  color: Colors.grey.withOpacity(0.2),
                  width: 1,
                ),
              ),
              child: Container(
                transform: Matrix4.translationValues(-15.0, 0.0, 00.0),
                child: SfCircularChart(
                  margin: EdgeInsets.symmetric(vertical: 8.0,horizontal: 12.0),
                  title: ChartTitle(
                    text: 'Today\'s Employee\'s Attendance',
                    textStyle: TextStyle(
                        color: Color(0xff15728a),
                        fontWeight: FontWeight.bold,
                        fontSize: 8.0),
                  ),
                  tooltipBehavior: _tooltipBehavior,
                  legend: Legend(
                      position: LegendPosition.bottom,
                      isVisible: true,
                      isResponsive:true,
                      overflowMode: LegendItemOverflowMode.wrap),
                  series: <CircularSeries>[
                    DoughnutSeries<AttendanceData, String>(

                      dataSource: attendance,
                      pointColorMapper:(AttendanceData data,_)=>data.colors,
                      xValueMapper: (AttendanceData data, _) =>
                      data.status,
                      yValueMapper: (AttendanceData data, _) =>
                      data.value,
                      dataLabelSettings:
                      DataLabelSettings(isVisible: true),
                      enableTooltip: true,
                    ),
                  ],
                ),
              ),
            ),
          ),

Upvotes: 3

Views: 2214

Answers (2)

dystopian_haze
dystopian_haze

Reputation: 91

You can use margin property of SfCircularChart to get rid of the distance.

Code Snippet:

margin: EdgeInsets.zero,

Upvotes: 2

Dharani
Dharani

Reputation: 309

Your requirement to get rid of empty space between the legend and the chart can be achieved by using centerY property which is used to position the chart vertically. Similarly, you can move and place them horizontally at the required place using the centerX property. We have attached the screenshot for your reference and please make use of it.

Code snippet

SfCircularChart( centerY: '750', )

Screenshot

enter image description here

You can also contact us through our support forums, Direct-Trac, or feedback portal if you need any further assistance. We are always happy to assist you!

Upvotes: 4

Related Questions