How to use SVG image in Flutter Cartesian Chart tooltip?

In this article, we explain how to use SVG image in the cartesian chart tooltip by using the Flutter Cartesian Chart.

In the SfCartesianChart widget, we can render the SVG image in the cartesian chart tooltip by using the builder property of TooltipBehavior. The following steps explain how to achieve this,

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: Now 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.

View the sample in GitHub.

Conclusion

I hope you enjoyed learning about how to use SVG image in Flutter Cartesian Chart tooltip.

You can refer to our Flutter Cartesian Chart feature tour page to know 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!