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

Question

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?

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,
                    ),
                  ],
                ),
              ),
            ),
          ),

score 4 · Answer 1 · edited Sep 29 '21 at 21:39

4

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

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!

edited Sep 29 '21 at 21:39

Dharman

30,962
25
85
135

answered Aug 09 '21 at 07:57

Dharani

179
1
8

1

i tried this solution it remove distance at one side as like it remove space from legend but increase space from chart tile . it cant shrink that both chart title and legend get equal space and chart became in center – Adnan haider Aug 09 '21 at 10:41

score 1 · Answer 2 · answered Dec 14 '22 at 06:57

1

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

Code Snippet:

margin: EdgeInsets.zero,

answered Dec 14 '22 at 06:57

dystopian_haze

71
1
4

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

2 Answers2