FlutterFlow Docs
Search…
⌃K

Chart

The chart widget is used to represent the information in a graphical format. You can use it to display complex information in an easily understandable format.
Charts

Types of chart

You can add the following types of charts:
  1. 1.
  2. 2.
    Bar Chart
  3. 3.
    Pie Chart
Tip: Click on the chart name to see how to add it to your project.

Customizing chart

Using the Chart Properties (inside the properties panel), you can customize the appearance and behavior of the widget.
The following instructions will have a similar effect on the Bar chart.
Here are all the customization options:

Showing legend

Legend helps users identify the data drawn over the chart. It's a small box that shows the chart data name/text next to its color (a color used to draw a line or bar).
Legend
To show legend:
  • Select the Chart widget from the widget tree or the canvas area.
  • Move to the properties panel, and open Chart Data 1.
  • Enter the Legend name. This will be displayed as the name of the line or bar.
  • If you have multiple chart data (e.g. Chart Data 1, Chart Data 2, and so on), set the legend for them as well.
  • Scroll down to Chart Properties and enable the Show Legend property.
Showing legend

Customizing legend box

You can change the appearance of the legend box by following the instruction below:
  • Scroll down to the Legend Properties section.
  • To change the dimension of the legend box, enter the Width and Height values.
  • The legend box typically appears over the chart on the bottom right side. To change its position, use the Horizontal and Vertical Alignment slider.
  • To change the background color, find the Background Color property and click on the box next to Unset, select the color, then click Use Color or click on Unset and enter a Hex Code directly.
  • To customize the border, use the Border Color, Border Width, and Border Radius.
  • To add space between legend text and its box border, adjust Pading property.
Customizing legend box

Customizing legend text and indicator

To customize the legend text and indicator:
  • To style the legend text, scroll down to the Legend Properties > Legend Text Properties and change the style as per here.
  • To add space between the indicator and the text, adjust the Text Padding property.
  • You can change the indicator size by entering a value inside the Indicator Size property.
  • To create rounded corners around the indicator, you can use the Indicator Border Radius property.
Customizing legend text and indicator

Changing background color

The default background color for the chart widget is white. To change the background color:
  • Select the Chart widget from the widget tree or the canvas area.
  • Move to the properties panel, and scroll down to the Chart Properties section.
  • Find the Background Color property, click on the box next to Unset, select any dark/light color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple buttons.
Changing background color

Set axis bounds

Axis Bounds specify limits on the axis. You can set the minimum and maximum limits on the X and Y axes.
You can set four types of bounds on a chart:
  1. 1.
    Min X (only applicable in Line Chart): Specifies a number at which the X-axis should start.
  2. 2.
    Min Y: Specifies a number at which the Y-axis should start.
  3. 3.
    Max X (only applicable in Line Chart): Specifies a number at which the X-axis should end.
  4. 4.
    Max Y: Specifies a number at which the Y-axis should end.
If you don't specify the axis bounds, the start and end numbers for the X and Y axis are set as per the min and max of the actual data.
To set the axis bounds:
  • Select the Chart widget from the widget tree or the canvas area.
  • Move to the properties panel, and scroll down to the Chart Properties section.
  • Find the Axis Bounds section and enter the Min X, Min Y, Max X, and Max Y values.
Settings axis bounds
Chart without axis bounds
Chart with axis bounds
The line chart without any axis bounds looks like this:
Line Chart without axis bounds
The line chart with bounds set to Min X:0 ,Min Y:0, Max X:7 and Max Y:100 looks like this:
Line Chart with axis bounds

Showing grid

To display the grid on the chart background:
  • Select the Chart widget from the widget tree or the canvas area.
  • Move to the properties panel, and scroll down to the Chart Properties section.
  • Find the Show Grid toggle and enable it.
Showing grid

Showing border

To display a border around the chart:
  • Select the Chart widget from the widget tree or the canvas area.
  • Move to the properties panel, and scroll down to the Chart Properties section.
  • Find the Show Border toggle and enable it.
  • Find the Border Color property, click on the box next to Black, select the color, and then click Use Color or click on Black and enter a Hex Code directly.
  • Now, find the Border Width property below and enter the value. (e.g. 2,5,10)
Showing border

Showing tooltip

Sometimes it becomes difficult to identify the exact Y value. To overcome this, you can enable the tooltip. Enabling the tooltip will display the Y value when you interact with the chart. You can also add background color to the tooltip.
To enable tooltip:
  • Select the Chart widget from the widget tree or the canvas area.
  • Move to the properties panel, and scroll down to the Chart Properties section.
  • Find the Show Border toggle and enable it.
  • To change the background color, find the Tooltip Background Color property, click on the box next to Unset, select any dark/light color, and then click Use Color or click on Unset and enter a Hex Code directly.
Showing tooltip

Customizing X axis (Show name, number, and labels)

You can customize the X axis to display names and numbers on it.

Displaying name on X-Axis

To show the name on the axis, such as day, week, and month:
  • Select the Chart widget from the widget tree or the canvas area.
  • Move to the properties panel, and scroll down to the Chart Properties section.
  • Scroll down to the X Axis Properties and enter the value in the Text input box. You can also set the name from a variable by clicking on the Set from Variable text.
Displaying X-axis name

Displaying numbers or labels on the X axis

Displaying numbers or labels on the axis helps you quickly understand the graph.
For Line Chart
If you have set the Axis bounds, the start and end numbers are displayed as per the value set in Min X and Max X. Otherwise, they are shown as per the min and max values of the actual data. You can also specify the intervals between the numbers.
To display numbers on the X axis:
  • Select the Chart widget from the widget tree or the canvas area.
  • Move to the properties panel, and scroll down to the Chart Properties section.
  • Scroll down to the X Axis Properties, find the Show Label toggle, and enable it.
  • To set the interval in Line Chart, enter the value in the Label Interval input box.
Displaying numbers on the X axis
Bar Chart
For the bar chart, you can only display labels on X-axis. To do so:
  • Select the Chart widget from the widget tree or the canvas area.
  • Move to the properties panel, and scroll down to the Chart Properties section.
  • Scroll down to the X Axis Properties, find the Show Label toggle, and enable it.
This will display values from the Bar Labels.
Bar Chart: Showing labels on X-axis

Customizing Y axis (Show name and numbers)

You can customize the Y axis to display names and numbers on it.

Displaying name on Y-axis

To show the name on the axis, such as progress, number of users, and sales:
  • Select the Chart widget from the widget tree or the canvas area.
  • Move to the properties panel, and scroll down to the Chart Properties section.
  • Scroll down to the Y-Axis Properties and enter the value in the Text input box. You can also set the name from a variable by clicking on the Set from Variable text.
Displaying Y-axis name

Displaying numbers on the Y axis

Just like X-axis, If you have set the Axis bounds, the start and end numbers are displayed as per the value set in Min Y and Max Y. Otherwise, they are shown as per the min and max value of the actual data. You can also specify the intervals between the numbers.
To display numbers on the Y axis:
  • Select the Chart widget from the widget tree or the canvas area.
  • Move to the properties panel, and scroll down to the Chart Properties section.
  • Scroll down to the Y-Axis Properties, find the Show Label toggle, and enable it.
  • To set the interval, enter the value in the Label Interval input box.
Displaying numbers on the Y axis

Add padding

Here are the instructions on how to add padding.

Adjust alignment

Here are the instructions on adjusting the alignment.

Set color dynamically

See how to set a color from variable to any color property of this widget.

Show/hide widget

Please find the instructions to show/hide the widget here.
Last modified 1mo ago