Flutter – how to show % sign beside double value

I want to display the percentage sign (%) next to my sales values in a Flutter chart.
I have a SalesData model class that represents my sales data:

class SalesData {
  SalesData(this.attempNo, this.sales);
  final int attempNo;
  final double sales;
}

I am using this model class to display the score and attempt number in a graph, and I am also displaying the sales value on the y-axis. However, I am unable to display the percentage sign (%) next to the sales values.
Here is my code for the graph:

Stack(
  children: [
    SfCartesianChart(
    
      primaryXAxis: NumericAxis(
        isVisible: false,
        interval: 1, // Set the interval to 1 to display every data point on the x-axis
        majorGridLines: const MajorGridLines(
          width: 0,
        ), 
      ),
      primaryYAxis: NumericAxis(
        minimum: 0,
        maximum: 100,
        interval: 10,
        majorGridLines: const MajorGridLines(
          width: 0,
        ),
        axisLine: const AxisLine(width: 0),
    
      ),
      series: <LineSeries<SalesData, int>>[
        LineSeries<SalesData, int>(
          // Bind data source
          dataSource: overallSalesData
              .map((sale) => SalesData(
                    sale['attempNo'] as int,
                    sale['score'] as double,
                  ))
              .toList(),
          xValueMapper: (SalesData sales, _) => sales.attempNo,
          yValueMapper: (SalesData sales, _) => sales.sales.toDouble(),
          // Data label settings
          dataLabelSettings: const DataLabelSettings(
            isVisible: true,
          ),
          // Marker settings
          markerSettings: const MarkerSettings(
            isVisible: true,
          ),
          // Point color mapper
          pointColorMapper: (SalesData sales, _) {
            if (sales.sales >= 80) {
              return const Color(0xFF0073C8);
            } else if (sales.sales >= 60) {
              return const Color(0xFF0089EF);
            } else if (sales.sales >= 40) {
              return const Color(0xFF00B4C8);
            } else if (sales.sales >= 20) {
              return const Color(0xFFFFCB54);
            } else {
              return const Color(0xFFFFB200);
            }
          },
        ),
      ],
    ),
    Positioned(
      bottom: -40,
      left: 100,
      child: CustomPaint(
        painter: ArrowPainter(context),
        size: const Size(200.0, 100.0),
      ),
    ),
  ],
);

The problem is that the yValueMapper function returns a double, and I need to append the percentage sign (%) before displaying it.
Please help me solve this problem.
kindly help me out