Flutter Syncfusion legend label only shows 'All'

Question

Im using syncfusion SfCircularChart. I have enabled legends but only 'All' is shown as the label for legends

This is how i have implemented the chart.

Widget build(BuildContext context) {    
    return SfCircularChart(
      legend: Legend(
        iconBorderWidth: 20,
        isVisible: true,
        toggleSeriesVisibility: true,
        iconWidth: 30,
      ),
      series: <CircularSeries>[
        PieSeries<PieChartModel,String>(
          legendIconType: LegendIconType.rectangle,
          dataSource: chartData,
                    pointColorMapper:(PieChartModel data,  _) => data.color,
                    xValueMapper: (PieChartModel data, _) => data.title,
                    yValueMapper: (PieChartModel data, _) => data.percentage,
        )
      ],
    );

model for chartdata

class ChartModel {
  ChartModel({required this.title, required this.percentage, required this.color});
  final String title;
  final double percentage;
  final Color color;
}

//dummy Values
chartData data = [
ChartData(title: 'All', perenctage: 55 , color : Colors.red);
ChartData(title: 'English', perenctage: 25 , color : Colors.red);
ChartData(title: 'Maths', perenctage: 30 , color : Colors.green);
ChartData(title: 'Social', perenctage: 10 , color : Colors.blue);
];

How can i resolve this and display proper label values??

Answer 1

I have tested and ensured all the legend names are rendered respective to the x value, with no issue getting reproduced. We have attached the sample below, which is used in the testing phase. If you still facing any issue, kindly try to reproduce the reported issue in the provided code snippet below. It will be more helpful to us to provide a solution sooner.

Screenshot:

Code snippet:

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<ChartModel> chartData;
  @override
  void initState() {
    chartData = <ChartModel>[
      ChartModel(title: 'All', percentage: 55, color: Colors.red),
      ChartModel(title: 'English', percentage: 25, color: Colors.orange),
      ChartModel(title: 'Maths', percentage: 30, color: Colors.green),
      ChartModel(title: 'Social', percentage: 10, color: Colors.blue),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: SfCircularChart(
          legend: Legend(
            position: LegendPosition.right,
            iconBorderWidth: 20,
            isVisible: true,
            toggleSeriesVisibility: true,
            iconWidth: 30,
          ),
          series: <CircularSeries>[
            PieSeries<ChartModel, String>(
              legendIconType: LegendIconType.rectangle,
              dataSource: chartData,
              pointColorMapper: (ChartModel data, _) => data.color,
              xValueMapper: (ChartModel data, _) => data.title,
              yValueMapper: (ChartModel data, _) => data.percentage,
            )
          ],
        ));
  }
}

class ChartModel {
  ChartModel(
      {required this.title, required this.percentage, required this.color});
  final String title;
  final double percentage;
  final Color color;
}