[syncfusion_flutter_charts: ^25.2.5] Chart title is not displayed in SfCircularChart. #1889
Description
Bug description
Hello.
The chart title is not displayed in SfCircularChart.
However, in SfCartesianChart, the chart title is displayed without any problems.
I know you are busy, but please let me know a good solution.
I have attached the source.
Steps to reproduce
Please run the attached source.
Code sample
Code sample
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
late GlobalKey<SfCircularChartState> _circularChartKey;
int totalNum = 0;
final List<PieChartData> _pieChartData = [];
final List<String> teaKind = ['Green tea', 'Red tea', 'Jasmine tea'];
final List<int> sum = [166, 165, 331];
String title = 'Which tea would you prefer?';
@override
void initState() {
super.initState();
_circularChartKey = GlobalKey();
//Calculate the total.
totalNum = 0;
for (var i = 0; i < sum.length; i++) {
totalNum += sum[i];
}
_pieChartData.clear();
for (var i = 0; i < teaKind.length; i++) {
//Create PieChartData(String x, int y, String text).
double ratio = sum[i] / totalNum * 100;
//Round off the number to the nearest 1 decimal place.
double ratioRound = double.parse(ratio.toStringAsFixed(1));
PieChartData data = PieChartData(
teaKind[i], sum[i], '${sum[i]}\n($ratioRound%)');
_pieChartData.add(data);
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: SfCircularChart(
backgroundColor: const Color(0xFFFFFFE6),
key: _circularChartKey,
//Legend
legend: Legend(
//Show total in the legend.
title: LegendTitle(
text:
'Total: $totalNum\n (100%)\n',
textStyle: const TextStyle(
color: Colors.black,
fontSize: 28.0,
decoration: TextDecoration.none),
alignment: ChartAlignment.near),
isVisible: true,
//legend settings
position: LegendPosition.right,
alignment: ChartAlignment.center,
iconWidth: 24.0,
iconHeight: 24.0,
textStyle: const TextStyle(
color: Colors.black, fontSize: 30.0)),
// Display chart title
title: ChartTitle(
alignment: ChartAlignment.near,
text: title,
textStyle: const TextStyle(
fontSize: 28.0,
color: Colors.black,
decoration: TextDecoration.none
),
),
series: <CircularSeries>[
// Initialize PieSeries series
(PieSeries<PieChartData, String>(
dataSource: _pieChartData,
pointColorMapper: (PieChartData data, _) => data.color,
xValueMapper: (PieChartData data, _) => data.x,
yValueMapper: (PieChartData data, _) => data.y,
dataLabelMapper: (PieChartData data, _) => data.text,
radius: '100%',
dataLabelSettings: const DataLabelSettings(
showZeroValue: false,
color: Colors.white,
opacity: 1.0,
textStyle: TextStyle(
fontSize: 26.0,
color: Colors.black),
isVisible: true),
)),
]),
),
)
)
);
}
}
class PieChartData {
PieChartData(this.x, this.y, this.text, [this.color]);
final String x;
final int y;
final String text;
final Color? color;
}
Screenshots or Video
There are no screenshots.
Stack Traces
There is no stack trace.
On which target platforms have you observed this bug?
macOS
Flutter Doctor output
Doctor output
/Users/taka/development/flutter/bin/flutter doctor --verbose
[✓] Flutter (Channel stable, 3.22.0, on macOS 14.4.1 23E224 darwin-arm64, locale ja-JP)
• Flutter version 3.22.0 on channel stable at /Users/taka/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 5dcb86f68f (3 weeks ago), 2024-05-09 07:39:20 -0500
• Engine revision f6344b75dc
• Dart version 3.4.0
• DevTools version 2.34.3
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/taka/Library/Android/sdk
• Platform android-34, build-tools 30.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15C500b
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
[✓] VS Code (version 1.89.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (3 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.4.1 23E224 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.4.1 23E224 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 125.0.6422.112
[✓] Network resources
• All expected network resources are available.
• No issues found!
Process finished with exit code 0