Draft: add FlDotImagePainter for custom image dot markers

example/lib/presentation/samples/chart_samples.dart

@@ -1,4 +1,5 @@
 import 'package:fl_chart_app/presentation/samples/candlestick/candlestick_chart_sample1.dart';
+import 'package:fl_chart_app/presentation/samples/line/line_chart_sample14.dart';
 import 'package:fl_chart_app/util/app_helper.dart';
 
 import 'bar/bar_chart_sample1.dart';
@@ -46,6 +47,7 @@ class ChartSamples {
       LineChartSample(11, (context) => const LineChartSample11()),
       LineChartSample(12, (context) => const LineChartSample12()),
       LineChartSample(13, (context) => const LineChartSample13()),
+      LineChartSample(14, (context) => const LineChartSample14()),
     ],
     ChartType.bar: [
       BarChartSample(1, (context) => BarChartSample1()),

example/lib/presentation/samples/line/line_chart_sample14.dart

@@ -0,0 +1,122 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+
+/// LineChartSample14 demonstrates how to use FlDotImagePainter
+/// to display custom images as dot markers on a line chart.
+///
+/// This sample shows:
+/// - Loading images asynchronously before creating the chart
+/// - Using FlDotImagePainter with custom image assets
+/// - Handling loading states while images are being loaded
+class LineChartSample14 extends StatefulWidget {
+  const LineChartSample14({super.key});
+
+  @override
+  State<LineChartSample14> createState() => _LineChartSample14State();
+}
+
+class _LineChartSample14State extends State<LineChartSample14> {
+  /// The custom dot painter that will render images at each data point.
+  /// Null until the image is loaded asynchronously.
+  FlDotImagePainter? _dotPainter;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  /// Loads the image asset and creates a FlDotImagePainter.
+  ///
+  /// This must be done asynchronously before the chart can be rendered
+  /// because the draw() method is synchronous and cannot load images on-demand.
+  Future<void> _loadImage() async {
+    final image = await FlDotImagePainter.loadImageFromAsset(
+      'assets/icons/image_annotation.png',
+    );
+    setState(() {
+      _dotPainter = FlDotImagePainter(image: image, size: 20.0);
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Show a loading indicator while the image is being loaded
+    if (_dotPainter == null) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    return AspectRatio(
+      aspectRatio: 1.5,
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: LineChart(
+          LineChartData(
+            // Define the chart boundaries
+            minX: 0,
+            maxX: 6,
+            minY: 0,
+            maxY: 6,
+            // Configure axis titles
+            titlesData: FlTitlesData(
+              show: true,
+              bottomTitles: AxisTitles(
+                sideTitles: SideTitles(
+                  showTitles: true,
+                  reservedSize: 30,
+                  interval: 1,
+                ),
+              ),
+              leftTitles: AxisTitles(
+                sideTitles: SideTitles(
+                  showTitles: true,
+                  reservedSize: 40,
+                  interval: 1,
+                ),
+              ),
+              topTitles: const AxisTitles(
+                sideTitles: SideTitles(showTitles: false),
+              ),
+              rightTitles: const AxisTitles(
+                sideTitles: SideTitles(showTitles: false),
+              ),
+            ),
+            gridData: const FlGridData(show: true),
+            borderData: FlBorderData(
+              show: true,
+              border: Border.all(color: Colors.grey),
+            ),
+            lineBarsData: [
+              LineChartBarData(
+                spots: const [
+                  FlSpot(0, 3),
+                  FlSpot(1, 1),
+                  FlSpot(2, 4),
+                  FlSpot(3, 2),
+                  FlSpot(4, 5),
+                  FlSpot(5, 3),
+                  FlSpot(6, 4),
+                ],
+                isCurved: true,
+                color: Colors.blue,
+                barWidth: 3,
+                // Use FlDotImagePainter to display custom images at each data point
+                dotData: FlDotData(
+                  show: true,
+                  getDotPainter: (spot, percent, barData, index) {
+                    // Return the pre-loaded image painter for each dot
+                    return _dotPainter!;
+                  },
+                ),
+                belowBarData: BarAreaData(
+                  show: true,
+                  color: Colors.blue.withValues(alpha: 0.3),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/chart/base/axis_chart/axis_chart_data.dart

@@ -9,6 +9,7 @@ import 'package:fl_chart/src/utils/canvas_wrapper.dart';
 import 'package:fl_chart/src/utils/lerp.dart';
 import 'package:fl_chart/src/utils/utils.dart';
 import 'package:flutter/material.dart' hide Image;
+import 'package:flutter/services.dart';
 
 /// This is the base class for axis base charts data
 /// that contains a [FlGridData] that holds data for showing grid lines,
@@ -1466,6 +1467,73 @@ abstract class FlDotPainter with EquatableMixin {
   }
 }
 
+/// This class is an implementation of a [FlDotPainter] that draws
+/// an image as the dot marker
+class FlDotImagePainter extends FlDotPainter {
+  /// Creates an image dot painter.
+  ///
+  /// [image] must be loaded before creating this painter.
+  /// Use [loadImageFromAsset] to load images from assets.
+  FlDotImagePainter({
+    required this.image,
+    this.size = 24.0,
+  });
+
+  /// The image to draw as the dot marker
+  final Image image;
+
+  /// The size of the dot (width and height)
+  final double size;
+
+  /// Loads an image from asset path and returns a [Image] object.
+  ///
+  /// Example:
+  /// ```dart
+  /// final image = await FlDotImagePainter.loadImageFromAsset('assets/dot.png');
+  /// final painter = FlDotImagePainter(image: image, size: 20.0);
+  /// ```
+  static Future<Image> loadImageFromAsset(String assetPath) async {
+    final byteData = await rootBundle.load(assetPath);
+    final codec = await instantiateImageCodec(byteData.buffer.asUint8List());
+    final frame = await codec.getNextFrame();
+    return frame.image;
+  }
+
+  @override
+  void draw(Canvas canvas, FlSpot spot, Offset offsetInCanvas) {
+    // Center the image at the offset
+    final drawOffset = offsetInCanvas - Offset(size / 2, size / 2);
+    final rect = Rect.fromLTWH(drawOffset.dx, drawOffset.dy, size, size);
+    paintImage(
+      canvas: canvas,
+      rect: rect,
+      image: image,
+      fit: BoxFit.contain,
+      filterQuality: FilterQuality.high,
+    );
+  }
+
+  @override
+  Color get mainColor => Colors.transparent;
+
+  @override
+  Size getSize(FlSpot spot) => Size(size, size);
+
+  @override
+  FlDotPainter lerp(FlDotPainter a, FlDotPainter b, double t) {
+    if (a is! FlDotImagePainter || b is! FlDotImagePainter) {
+      return b;
+    }
+    return FlDotImagePainter(
+      image: b.image,
+      size: lerpDouble(a.size, b.size, t) ?? b.size,
+    );
+  }
+
+  @override
+  List<Object?> get props => [image, size];
+}
+
 /// This class is an implementation of a [FlDotPainter] that draws
 /// a circled shape
 class FlDotCirclePainter extends FlDotPainter {