Bar with track and data labels for remaining balance

Question

I want to achieve that there are horizontal bars with track that will show how much amount has been used and how much amount is remaining. I am not sure how may I achieve this with bar, or should I use a progress indicator instead? I want to also show the title on the left side of the bar, and the remaining balance on the end of the data bar.

The image is a sample on how I want it to looks like. Any help is appreciated.

image sample

Below is my current code using Syncfusion Chart package. But I do not know how may I add data label on the right side as shown in the image.

  List<ChartSeries<FoodData, String>> _getBarSeries2() {
    return <BarSeries<FoodData, String>>[
      BarSeries<FoodData, String>(
          name: 'Food',
          dataSource: _chartData,
          width: 0.6,
          xValueMapper: (FoodData data, _) => data.food,
          yValueMapper: (FoodData data, _) => data.amount,
          gradient: LinearGradient(
            colors: <Color>[
              Color.fromRGBO(53, 92, 125, 1),
              Color.fromRGBO(192, 108, 132, 1),
            ],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
          borderRadius: BorderRadius.circular(15),
          trackColor: const Color.fromRGBO(220, 220, 220, 1),
          isTrackVisible: true,
          onPointTap: (args) {
            setState(() {
              selectedPointIndex = args.pointIndex!;
              print(selectedPointIndex);
            });
            final FoodData tappedData = _chartData[selectedPointIndex];
            _showDataPopup(context, tappedData);
          })
    ];
  }

  SfCartesianChart(
    plotAreaBorderWidth: 0,
    tooltipBehavior: _tooltipBehavior,
    primaryXAxis: CategoryAxis(
      axisLine: const AxisLine(width: 0),
      majorTickLines: const MajorTickLines(width: 0),
      majorGridLines: const MajorGridLines(width: 0),
    ),
    primaryYAxis: NumericAxis(
    isVisible: false,
    majorGridLines: const MajorGridLines(width: 0),
    title: AxisTitle(text: 'Food Amount'),
    minimum: 0,
    maximum: 60,
    majorTickLines: const MajorTickLines(size: 0),
  ),
  series: _getBarSeries2()),