Category / Section
How to render the Flutter chart with background image (SfCartesianChart) ?
4 mins read
SfCartesianChart provides support for rendering the background image for the plot area. You can set the desired image as a background for the plot area using the plotAreaBackgroundImage property.
The following steps describe step by step procedure for adding the image to plot area of chart widget.
Step 1: Create a folder named as images in your application and copy the desired image.
Step 2: Then, add the asset section in the pubspec.yaml file.
Step 3: Now, wrap the SfCartesianChart widget with Container widget, and then add the image to the Container widget.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/texture.jpg"),
fit: BoxFit.cover,
),
),
child: SfCartesianChart(
//Other configurations
),
)
);
}
