Show the legend name horizontally on top of the chart (flutter chart)

Question

I am using this SfCartesianChart in flutter and here I want to show the legend name horizontally on top of the chart like father, mother, son, and daughter. I don't want to show it vertically. and I also want to change the icon which presents the legend name. I want to show it in the color fill box in front of the legend name. like giving an example image.

how can I do this? please suggest to me some idea.

I want to show it like this:

class _StackedBarState extends State<StackedBar> {
  late List<ExpenseData> _chartData;
  late TooltipBehavior _tooltipBehavior;

  @override
  void initState() {
    _chartData = getChartData();
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SfCartesianChart(
      title: ChartTitle(text: "Chart Title"),
      legend: Legend(isVisible: true),
      tooltipBehavior: _tooltipBehavior,
      series: <ChartSeries>[
        StackedBarSeries<ExpenseData, String>(
            dataSource: _chartData,
            xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
            yValueMapper: (ExpenseData exp, _) => exp.father,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: 'father',color: Colors.green,width: 0.4 ,
        markerSettings: MarkerSettings(isVisible: true)),
        StackedBarSeries<ExpenseData, String>(
          dataSource: _chartData,
          xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
          yValueMapper: (ExpenseData exp, _) => exp.mother,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: "Mother",color: Colors.yellowAccent,width: 0.4 ,
            markerSettings: MarkerSettings(isVisible: true)),
        StackedBarSeries<ExpenseData, String>(
          dataSource: _chartData,
          xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
          yValueMapper: (ExpenseData exp, _) => exp.son,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: "son",color: Colors.red,width: 0.4 ,
            markerSettings: MarkerSettings(isVisible: true)),
        StackedBarSeries<ExpenseData, String>(
          dataSource: _chartData,
          xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
          yValueMapper: (ExpenseData exp, _) => exp.daughter,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: 'daughter',color: Colors.orange,width: 0.4 ,
            markerSettings: MarkerSettings(isVisible: true)),

      ],
      primaryXAxis: CategoryAxis(),
    );
  }

  List<ExpenseData> getChartData() {
    final List<ExpenseData> charData = [
      ExpenseData('others', 55, 30, 65, 80),
      ExpenseData('gaurav shankar', 25, 40, 56, 75),
      ExpenseData('bal kishor', 15, 50, 36, 89),
      ExpenseData('shashi singh', 45, 60, 56, 89),
      ExpenseData('santosh kumar', 30, 10, 60, 90),
    ];
    return charData;
  }
}

class ExpenseData {
  ExpenseData(
    this.expenseCategory,
    this.father,
    this.mother,
    this.son,
    this.daughter,
  );

  final String expenseCategory;
  final num father;
  final num mother;
  final num son;
  final num daughter;
}

Answer 1

Just set the Legend.position to LegendPosition.top like so:

  legend: Legend(isVisible: true, position: LegendPosition.top),

This is the result: