Flutter: Add circular labels to syncfusion DoughnutSeries chart

104 Views Asked by At

I've added a Doughnut chart from syncfusion package and I've encountered the following problem:

I want to make the labels circular like in this image: enter image description here

Currently my chart looks like this:

enter image description here

Notice how the labels are not circular/rotated like in the first chart

If I can achieve the same effect like in the first image using a different package feel free to drop a link

Current code:

SfCircularChart(
            annotations: [
              CircularChartAnnotation(
                  height: '60%',
                  width: '60%',
                  widget: PhysicalModel(
                    shape: BoxShape.circle,
                    elevation: 10,
                    color: Colors.white,
                    child: Container(),
                  )),
              CircularChartAnnotation(
                  height: '60%',
                  width: '60%',
                  widget: PhysicalModel(
                    shape: BoxShape.circle,
                    elevation: 10,
                    color: const Color.fromRGBO(230, 230, 230, 1),
                    child: Container(),
                  )),
              CircularChartAnnotation(
                widget: const Text(
                  'Out of season',
                ),
              )
            ],
            series: <CircularSeries>[
              DoughnutSeries<TestData, String>(
                radius: '100',
                innerRadius: '70',
                dataSource: data,
                xValueMapper: (TestData data, _) => data.title,
                yValueMapper: (TestData data, _) => data.value,
                strokeColor: Colors.white,
                strokeWidth: 2,
                groupMode: CircularChartGroupMode.value,
                enableTooltip: false,
                dataLabelSettings: const DataLabelSettings(
                  isVisible: true,
                  labelAlignment: ChartDataLabelAlignment.top,
                  alignment: ChartAlignment.near,
                  labelPosition: ChartDataLabelPosition.outside,
                  labelIntersectAction: LabelIntersectAction.shift,
                  connectorLineSettings:
                      ConnectorLineSettings(width: 0, length: '0'),
                ),
                pointColorMapper: (TestData data, _) => Colors.grey,
              )
            ],
          );


  List<TestData> data = [
    TestData('21.10', 1),
    TestData('22.10', 1),
    TestData('23.10', 1),
    TestData('24.10', 1),
    TestData('25.10', 1),
  ];
}

class TestData {
  TestData(this.title, this.value);
  final String title;
  final double value;
}
0

There are 0 best solutions below