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:

Currently my chart looks like this:
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;
}
