--- title: "Create a Flutter Column Chart to View the Top 15 Water-Consuming Countries in the World" published_at: "2024-10-09T13:56:30+00:00" modified_at: "2026-01-09T13:01:43+00:00" url: "https://www.syncfusion.com/blogs/post/flutter-column-chart-for-water-consumption" excerpt: "Let's see how to visualize the top 15 water-consuming countries data using the Syncfusion Flutter Column Chart." taxonomy_category: - "Chart" - "Chart of the week" - "Desktop" - "Flutter" - "Mobile" - "Web" taxonomy_post_tag: - "Charts" - "Data Visualization" - "desktop" - "Flutter" - "Mobile" - "Web Development" --- [Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week) # Create a Flutter Column Chart to View the Top 15 Water-Consuming Countries in the World [Preethika Selvam](https://www.syncfusion.com/blogs/author/preethika-selvam) ![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Create-a-Flutter-Column-Chart-to-View-the-Top-15-Water-Consuming-Countries-in-the-World.jpg) **TL;DR:** Let’s visualize the top 15 water-consuming countries using the Syncfusion Flutter Column Chart. We’ll gather data from worldometers and use a Column Chart for comparisons. Custom tooltips and data labels enhance interactivity, while gradient effects and a minimalist layout highlight water usage trends. Welcome to our **Chart of the Week** blog Series! Charts are powerful tools to simplify complex datasets, turning them into engaging visual representations. They are widely used across sectors such as business, education, and environmental studies, allowing users to explore trends, comparisons, and relationships easily. By visualizing data, we can uncover patterns that might remain hidden in raw numbers. In this blog, we’ll visualize the world’s top 15 water-consuming countries using the Syncfusion [Flutter Column Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/column-chart) with tooltips and custom data labels to improve clarity and interactivity. ## Column Chart A [Column Chart](https://help.syncfusion.com/flutter/cartesian-charts/chart-types/column-chart) is a popular tool to represent categorical data using vertical bars. It’s ideal for comparing values across different groups, like water usage per country. ## Custom data labels Data labels allow us to display key information directly on the chart, making it easier for viewers to interpret the data. In this visualization, we’ll customize the data labels to show the country icons. [Syncfusion Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) make this easy using the [builder](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/builder.html) property in the [dataLabelSettings](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html) . ## Custom tooltips Tooltips enhance the chart’s interactivity by displaying additional data when users tap or hover over a column, especially on mobile devices where hover options are not available. Here, we’ll customize the tooltip to display the year of water consumption. [Syncfusion Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) widget offers straightforward customization of tooltips through the [builder](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/builder.html) property in [TooltipBehavior](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/tooltipBehavior.html) . Let’s visualize the data of the top 15 water-consuming countries using the Syncfusion Flutter Column Chart! Refer to the following image. ## ![Visualizing the top 15 water-consuming countries in the world using Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Visualizing-the-top-15-water-consuming-countries-in-the-world-using-Flutter-Column-Chart-1.png) ## Step 1: Gathering data on water consumption Let’s collect data on the top 15 water-consuming countries from [worldometers](https://www.worldometers.info/water/) . Organize this information into a list that includes each country’s name and its yearly water consumption in cubic meters (Thousands of liters). This will serve as the dataset for our chart. ## Step 2: Preparing the data for the chart Create a **WaterConsumptionData** model that contains details of the country name, yearly water usage, and the year when the data was recorded. Refer to the following code example. ``` class WaterConsumptionData { WaterConsumptionData(this.country, this.yearlyWaterUsage, this.year); final String country; final double yearlyWaterUsage; final double year; } ``` Next, create a list to hold the country’s water usage data and the year the data was recorded, which we will use as the source for the Flutter Chart. ``` late List _yearlyWaterUsageData; @override void initState() { super.initState(); _yearlyWaterUsageData = [ WaterConsumptionData('India', 761000000000, 2010), WaterConsumptionData('China', 598100000000, 2015), WaterConsumptionData('United-States', 444300000000, 2015), WaterConsumptionData('Indonesia', 222600000000, 2016), WaterConsumptionData('Pakistan', 183500000000, 2008), WaterConsumptionData('Iran', 93300000000, 2004), WaterConsumptionData('Mexico', 86580000000, 2016), WaterConsumptionData('Philippines', 85140000000, 2016), WaterConsumptionData('Vietnam', 82030000000, 2005), WaterConsumptionData('Japan', 81450000000, 2009), WaterConsumptionData('Egypt', 77500000000, 2017), WaterConsumptionData('Russia', 69500000000, 2016), WaterConsumptionData('Brazil', 63500000000, 2016), WaterConsumptionData('Turkey', 58950000000, 2016), WaterConsumptionData('Thailand', 57310000000, 2007), ]; ``` ## Step 3: Configure the Flutter Cartesian Charts Let’s create a [SfCartesianChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) to configure both the X and Y axes. In this setup, the X-axis uses [CategoryAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CategoryAxis-class.html) to represent the country names, while the Y-axis employs [NumericAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis-class.html) to display the water usage values in cubic meters. Refer to the following code example. ``` SfCartesianChart( primaryXAxis: const CategoryAxis(), primaryYAxis: const NumericAxis(), ), ``` ## Step 4: Binding data in the Flutter Column Chart Now, create a [Column Chart](https://help.syncfusion.com/flutter/cartesian-charts/chart-types/column-chart) and bind the data using the [ColumnSeries](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries-class.html) . Refer to the following code example to map the data source to the Flutter Column Chart. ``` series: >[ ColumnSeries( dataSource: _yearlyWaterUsageData, xValueMapper: (WaterConsumptionData data, int index) => data.country, yValueMapper: (WaterConsumptionData data, int index) => data.yearlyWaterUsage, ), ], ``` Refer to the following image. ![Binding data to the Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Binding-data-to-the-Flutter-Column-Chart.png) Binding data to the Flutter Column Chart ## Step 5: Applying a gradient to the Flutter Column series The next step is to apply a color gradient to the columns for a smoother transition between water usage levels. This is done by using the [LinearGradient](https://api.flutter.dev/flutter/painting/LinearGradient/LinearGradient.html) property within the [ColumnSeries](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries-class.html) to transition from a lighter blue at the top of the column to a darker blue at the bottom. The [gradient](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/gradient.html) provides a polished and modern look, enhancing the overall design. The [colors](https://api.flutter.dev/flutter/painting/Gradient/colors.html) property defines the two gradient shades: the top starts with **Colors.blue.shade400**, and the bottom transitions to ** Colors.blue.shade900**. The [stops](https://api.flutter.dev/flutter/painting/Gradient/stops.html) property indicates where the color transitions occur along the column, while the [begin](https://api.flutter.dev/flutter/painting/LinearGradient/begin.html) and [end](https://api.flutter.dev/flutter/painting/LinearGradient/end.html) properties specify the direction of the gradient, ensuring it moves from the top to the bottom of each column. Refer to the following code example. ``` series: >[ ColumnSeries( gradient: LinearGradient( colors: [ Colors.blue.shade400, Colors.blue.shade900, ], stops: const [0.3, 1.0], begin: Alignment.topCenter, end: Alignment.bottomCenter, ), ``` Refer to the following image. ![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Applying-gradient-effect-to-the-Flutter-Column-Chart.png) Applying a gradient effect to the Flutter Column Chart ## Step 6: Customizing the chart axes To streamline the chart’s appearance and focus on the data, we set the [majorGridLines](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/majorGridLines.html) width to 0, ensuring no grid lines are displayed on the X and Y axes. Similarly, we disable the [majorTickLines](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/majorTickLines.html) for the X-axis to create a focused chart layout without any tick marks. This minimalist approach helps us to reduce clutter and emphasizes the water consumption data presented in the columns. To make the axes more informative, we add titles by setting the [text](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisTitle/text.html) property to **“Cubic Meters** **(Thousands Of Liters)**” for the Y-axis and **“Countries”** for the X-axis. Refer to the following code example. ``` SfCartesianChart( primaryXAxis: const CategoryAxis( title: AxisTitle( text: 'Countries', textStyle: TextStyle( fontWeight: FontWeight.bold, ), ), majorGridLines: MajorGridLines(width: 0), majorTickLines: MajorTickLines(width: 0), ), primaryYAxis: const NumericAxis( title: AxisTitle( text: 'Cubic Meters (Thousands Of Liters)', textStyle: TextStyle( fontWeight: FontWeight.bold, ), ), majorGridLines: MajorGridLines(width: 0), ), ``` Refer to the following image. ![Customizing the axes in Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Customizing-the-axes-in-Flutter-Column-Chart.png) Customizing the axes in the Flutter Column Chart ## Step 7: Adding a chart title The [ChartTitle](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) widget allows us to place a title above the chart. By setting the [text](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property, we can specify the title of the chart. Additionally, the [textStyle](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/textStyle.html) property is used to adjust the font style and size for the title, making it more prominent. Refer to the following code example. ``` SfCartesianChart( title: const ChartTitle( text: 'Top 15 Yearly Water-Consuming Countries In Cubic Meters (Thousands Of Liters)', textStyle: TextStyle( fontWeight: FontWeight.bold, ), ), ``` Refer to the following image. ![Adding title to the Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Adding-title-to-the-Flutter-Column-Chart.png) Adding title to the Flutter Column Chart ## Step 8: Adding custom data labels to the chart To make our chart more engaging, we can enhance it by adding custom data labels that display the flags of each country at the top of their corresponding columns. This is done by using the [builder](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/builder.html) property of [dataLabelSettings](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html) . In this case, we’ll load an image representing the country’s flag from the local directory. Each image file is named according to the country field of the **WaterConsumptionData** object. To ensure the flags are displayed properly, add the necessary assets in your **pubspec.yaml** file, including each country’s flag image, as in the following code. ``` flutter: assets: - assets/images/India.png - assets/images/China.png - assets/images/United-States.png - assets/images/Indonesia.png - assets/images/Pakistan.png - assets/images/Iran.png - assets/images/Mexico.png - assets/images/Philippines.png - assets/images/Vietnam.png - assets/images/Japan.png - assets/images/Egypt.png - assets/images/Russia.png - assets/images/Brazil.png - assets/images/Turkey.png - assets/images/Thailand.png ``` Here’s the optimized code to implement custom data labels for your chart. ``` series: >[ ColumnSeries( dataLabelSettings: DataLabelSettings( isVisible: true, builder: (dynamic data, ChartPoint point, ChartSeries series, int pointIndex, int seriesIndex) { return Image( image: AssetImage('assets/images/${data.country}.png'), width: 30, height: 30, ); }, ), ``` Refer to the following image. ![Adding custom data labels to the Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Adding-custom-data-labels-to-the-Flutter-Column-Chart.png) Adding custom data labels to the Flutter Column Chart ## Step 9: Enabling tooltips To further enhance the chart’s interactivity, we enable the tooltip and create a custom display using the [builder](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/builder.html) property in [TooltipBehavior](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) . The tooltip will show the year of water usage for the selected country, with a customized appearance. Refer to the following code example to enable and customize the tooltip. ``` SfCartesianChart( tooltipBehavior: TooltipBehavior( enable: true, builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) { return Container( padding: const EdgeInsets.all(5), color: Colors.blue, child: Text( 'Year: ${data.year.toInt()}', style: const TextStyle(color: Colors.white), ), ); }, ), ``` Refer to the following image. ![Adding tooltip to the Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Adding-tooltip-to-the-Flutter-Column-Chart.png) Adding tooltip to the Flutter Column Chart ## Step 10: Customizing the chart’s background Finally, to enhance the chart’s aesthetics with a modern look, we have added a background color using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/backgroundColor.html) property in the [SfCartesianChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) . This color adds a subtle, visually appealing effect to the overall chart. Refer to the following code example. ``` SfCartesianChart( backgroundColor: Colors.lightBlue.withOpacity(0.3), ``` After executing the above code examples, the output will resemble the following image. ![Visualizing the top 15 water-consuming countries in the world using Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Visualizing-the-top-15-water-consuming-countries-in-the-world-using-Flutter-Column-Chart-1.png) Visualizing the top 15 water-consuming countries in the world using the Flutter Column Chart ## GitHub reference For more details, refer to [visualizing the top 15 water-consuming countries in the world using the Flutter Column Chart GitHub demo](https://github.com/SyncfusionExamples/how-to-visualize-the-top-15-water-consuming-countries-using-a-flutter-column-chart) . ## Conclusion Thank you for reading! In this blog, we’ve explored how to visualize the top 15 water-consuming countries in the world using the Syncfusion [Flutter Column Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/column-chart) . We strongly encourage you to follow the steps outlined in this blog and share your feedback in the comments section below. The existing customers can download the new version of Essential Studio®***®*** on the [License and Downloads](https://www.syncfusion.com/blogs/post/introducing-new-flutter-chat-widget) page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/blogs/post/introducing-new-flutter-chat-widget) to check out our incredible features. You can also contact us through our [support forums](https://www.syncfusion.com/blogs/post/introducing-new-flutter-chat-widget) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . We are always happy to assist you! ## Related blogs - [Syncfusion Essential Studio®2024 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/introducing-new-flutter-chat-widget) - [Syncfusion Essential Studio®2024 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/introducing-new-flutter-chat-widget) - [Chart of the Week: Create a Flutter Tornado or Butterfly Chart to View the World Population](https://www.syncfusion.com/blogs/post/flutter-tornado-chart-for-world-population) - [Sneak Peek at 2024 Volume 3: .NET MAUI](https://www.syncfusion.com/blogs/post/sneak-peek-2024-volume-3-dotnet-maui)