Pictures speak louder and quicker than words. One of the examples proving this is a graphical representation of data. From management’s perspective, charts play an important role in making quick decisions.
Charts In Flutter:
For the Flutter apps, FL Chart provides a very easy and attractive way to create Flutter charts. The FL Chart library is not only easy to use but also highly customizable. We can create interactive charts that respond to user interactions, such as touch events. Here, we are going to see how to build the charts with fl_chart.
The data used for the examples is simple and easy to understand the implementation.
Prerequisites:
Before the ignition, let’s confirm the supplies. You need the following.
- Flutter SDK
- Android Studio, VS Code, or any other relevant code editor
- Basic Flutter knowledge.
To develop apps efficiently using Flutter, especially when implementing data visualizations like charts, Flutter App Development Services is highly recommended. This will help you understand how Flutter can be used to create responsive and high-performing applications, making it easier to integrate features like charts into your projects.
The most used chart types in Flutter are Line charts, Bar charts, and Pie charts. Here, we have also covered the Scatter chart, Radar chart, and Candle chart. The code is arranged as follows: from the landing home screen, we have options to navigate to a particular chart. In the code, there is a controller that embeds a widget of that particular chart, which is the main code you would be interested in. Let’s go one by one.
Line Charts In Flutter
Overview:
To represent the data graphically, Line charts are considered to be one of the most useful ways in Flutter for data visualization. Here, we are going to see the data of demand per month between two products in a Flutter line chart.
LineChart is the widget provided by fl_chart to create the line chart. It takes LineChartData as a key parameter that defines how the data is going to be represented.
Now, let’s see the properties inside it.
borderData: It defines how the borders of the chart should look or even not to show at all. If you want to hide it, just pass false as
borderData: FlBorderData(show: false)
Code language: JavaScript (javascript)
By default, it is “true,” and we can further specify how the borders should be shown with the BorderSide widget.
gridData: By passing the FlGridData to this property we can decide the look of the grid on the chart. We can hide the grid by passing false to the “show” property of this widget. You can play with other properties of FlGridData like drawHorizontalLine, drawVerticalLine, horizontalInterval, verticalInterval, etc.
titlesData: This property takes a FlTitlesData widget, which takes an AxisTitles widget that defines how the titles on the axis need to be shown. We can customize these with SideTitles widget.
lineBarsData: This property takes an array of LineChartBarData. One LineChartBarData will plot one line on the chart. This enables the developer to plot multiple lines. Let’s check this widget’s properties.
spots: This takes a list of FlSpot. Each FlSpot has x and y coordinates through which the line goes.
isCurved: This property defines whether the line should be a curved line or a spot-to-spot straight line. If set “true”, it curves the corners of the line on the spot’s position.
barWidth: We can define the width of the line with this property.
color: To distinguish between lines and/or give a cosmetic effect, we can set different colors to the lines.
These are the basics of plotting the line chart.
Now FlChart provides a very useful facility of handling the touch events.
lineTouchData: This property takes a LineTouchData widget that can be used to show tool tips. We have the facility to disable the touches also by setting enabled: false.
getTooltipItems: This property in the LineTouchTooltipData widget retrieves data to show in the tooltip. We can define the appearance of the tooltip view with the widget LineTooltipItem.
Now for the gimmick.
You can apply animations to the chart as per your need. Here, we are animating the chart with the help of a timer. As the specified timer value hits, the state is rendered, changing the value of a boolean variable changeState, which then gets referred to pass the data to spots: of each LineChartBarData as follows.
Bar Chart In Flutter
Overview:
Bar Charts are great for comparing values or scales of different categories like the example we are using of the prospects and clients converted in referred months. Here, for each month, one bar represents the prospects, and the other represents the converted clients. The length of the bar represents the quantity.
You may want to consider Customizing Flutter App with Flavors for Different Environments when working on Flutter apps. This is especially helpful if you need to differentiate between development, staging, or production environments while developing these complex data visualizations.
The code is arranged in BarChartWidget which is added in the BarChartExample class. A List of BarChartGroupData is passed to this widget as a parameter.
titlesData: We can define the style and data of the titles in the FlTitlesData widget. In this widget, we can handle the title of each side with the properties as shown in the code. Here, we have set the bottom titles by passing the textual data of SideTitles to the bottomTitles property through AxisTitles widget. Similarly, you can set the titles for the top, right, and left sides. If you don’t want to show titles on a side, for example, the top or right side, simply set
showTitles: false in the SideTitles widget for the respective property of that side.
backgroundColor: Set the background color of the chart.
alignment: Sets the alignment of the bars in the chart.
Now, let’s see the property that takes the bar data.
barGroups: This property takes the List of BarChartGroupData, which is the bar data to be represented.
barRods: In this property, an array of BarChartRodData is passed. The number of BarChartRodData defines the number of bars on the graph on the respective value of the x-axis. We can set the value of the bar and its cosmetics in the BarChartRodData.
barsSpace: Value set to this property defines the space between the bars under comparison on the respective x-axis value.
Now, coming back to the BarChartWidget class, check the barTouchData property of the BarChartData widget.
Pie Chart In Flutter
Overview:
A Pie Chart is a very effective way to represent the data in easily understandable format and in a visually pleasing way.
It presents data in sections each of which represents a certain portion of the data to compare with others. Like in our example here, the data of the resource strength in each department of a company.
Top comments (0)