How to use SVG image in Flutter Cartesian Chart tooltip?

In this article, we explain how to display SVG images in tooltips when using the Flutter Cartesian Chart.

In the SfCartesianChart widget allows you to render SVG images in tooltips by utilizing the builder property of TooltipBehavior. Follow these steps to implement this feature:

Step 1: To access SVG images, add the flutter_svg dependency to the pubspec file. Also, ensure that the SVG image has been added to the project and is referred to the pubspec's assets.

dependencies:
  flutter_svg: ^1.0.3
flutter:
  assets:
  - assets/

Step 2: Initialize the _chartData variable in the initState method, which contains the chart's data source. And access the SVG image from the asset folder using the SvgPicture.asset. Find the code below to accomplish this.

import 'package:flutter_svg/svg.dart';
 
late List<_ChartData> _chartData;
late TooltipBehavior _tooltipBehavior;
 
@override
void initState() {
  _chartData = <_ChartData>[
    _ChartData('Jan', 35),
    _ChartData('Feb', 28),
    _ChartData('Mar', 34),
    _ChartData('Apr', 32),
    _ChartData('May', 40)
  ];
  _tooltipBehavior = TooltipBehavior(
     enable: true,
     builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) {
       return SizedBox(
           child: SvgPicture.asset('assets/circle.svg')
       );
     }
   );
  super.initState();
}
 
class _ChartData {
  _ChartData(this.year, this.sales);
    final String year;
    final double sales;
}

Step 3: Create the SfCartesianChart widget with the ColumnSeries and initialize the required properties. And also assign the _tooltipBehavior to the tooltipBehavior property.

@override
Widget build(BuildContext context) {
  return SfCartesianChart(
    tooltipBehavior: _tooltipBehavior,
    primaryXAxis: CategoryAxis(),
    series: <ColumnSeries<_ChartData, String>>[
      ColumnSeries<_ChartData, String>(
        dataSource: _chartData,
        xValueMapper: (_ChartData data, _) => data.year,
        yValueMapper: (_ChartData data, _) => data.sales
      )
    ]
  );
}

Now the cartesian chart tooltip will render with the SVG image.

Conclusion

I hope you found this guide helpful for implementing SVG images in Flutter Cartesian Chart tooltips.

You can refer to our Flutter Cartesian Chart feature tour page to leran about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter Cartesian Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!