Overflowing labels on Doughnut Series are getting hidden regardless of 'overflow' settings
I'm trying to create a Doughnut chart that has outer labels for each datapoint, showing its value. The labels have been customized using a builder.
Unfortunately, many of the labels are completely hidden, even though it looks like at least some of them should have no problems fitting inside the available space:
These are my chart label settings:
DataLabelSettings(
overflowMode: OverflowMode.shift,
labelIntersectAction: LabelIntersectAction.shift,
margin: EdgeInsets.all(0),
isVisible: true,
textStyle: TextStyle(
fontSize: 10,
),
borderWidth: 0,
labelPosition:
ChartDataLabelPosition
.outside,
connectorLineSettings:
ConnectorLineSettings(
// Type of the connector line
type:
ConnectorType.line),
builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) {
return Text(
getInvestmentAsString(point.y),
overflow: TextOverflow.ellipsis,
softWrap: false,
style: kDistributionChartLabelTextStyle);
}
),
As you can see, both the 'overflow' and the 'label intersection' settings are set to 'shift', and inside the builder I've also set the text overflow setting to 'ellipsis' and the softWrap to 'false', just in case.
I've played around a lot with all of these settings, but none of them seem to make any difference.
The chart is nested as follows:
Card -> Padding (15.0) -> Column -> SfCircularChart
It looks to me like the space used by the labels themselves is just not considered when dimensioning the whole chart widget. But even if that cannot be fixed, I wish I had the option to force the labels to stay in place, even if they overflow slightly, or at the very least have them clipped/trimmed rather than hidden.
In this case, it would be perfectly acceptable to have the labels slightly invading the padding of the card, but it seems they're removed no matter which settings I choose.
Workarounds that I've tried:
- Remove the padding of the card. It can work, but then you need to make sure that every other element you place inside the card is padded/separated individually, which is not how things should be done and makes code difficult to maintain.
- Nest the SfCircularChart directly inside a container, and give the container a fixed height (e.g.: 200 pixels). Because the chart is circular, by constraining it vertically its horizontal size is also shrinked, which means the labels now have more white space around them and fewer of them are clipped. Still a bad solution, as some labels are still getting clipped, and this will make the chart too small for users on bigger screens, or too big for users on smaller screens.
