diff --git a/docs/resources/ui/widgets/built-in-widgets/chart/bar-chart.md b/docs/resources/ui/widgets/built-in-widgets/chart/bar-chart.md
index 7e61a4d82..0f2825d72 100644
--- a/docs/resources/ui/widgets/built-in-widgets/chart/bar-chart.md
+++ b/docs/resources/ui/widgets/built-in-widgets/chart/bar-chart.md
@@ -1,108 +1,39 @@
---
slug: bar-chart
title: Bar Chart
-tags: []
-description: Learn how to add Bar Chart widget in your FlutterFlow project.
+tags: [Charts, Data Visualization]
+description: Learn how to add a Bar Chart widget in your FlutterFlow project.
sidebar_position: 1
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
# Bar Chart
-The Bar Chart shows the rectangular bars on a graph whose height varies as per its numeric value and has equal width. This can be used to display categorical information.
-
-For example, you could use the Bar chart to display each year's income and expense value together.
-
-
-## Adding bar chart
-
-Adding a chart comprises of following steps:
-
-1. [Preparing data](#1-preparing-data)
-2. [Adding bar chart widget](#2-adding-bar-chart-widget)
-
-### 1. Preparing data
+A Bar Chart uses rectangular bars to compare values across categories. The height of each bar represents its value. For example, use it to compare income and expenses across different years.
-Before adding the chart widget, you need to prepare the data in the format that the chart widget accepts. The bar chart widget requires label values (runs horizontally from left to right) and Y coordinate values (runs vertically from bottom to top). Together these values (labels and Y coordinate) are used to draw bars on a chart. You can store and retrieve these values in the following ways:
+## Adding a Bar Chart {#adding-bar-chart}
-1. [Firestore Documents](#11-firestore-documents)
-2. [Numbers Lists](#12-numbers-lists)
+To add a **Bar Chart** widget to your project:
-#### 1.1 Firestore Documents
+1. Add the **Chart** widget from **Base Elements** or the widget tree.
+2. In the properties panel, set **Chart Type** to **Bar**.
+3. Open **Chart Data**, then expand **[Bar] Chart Data 1**.
+4. Choose a **Data Source**:
+ - **Firestore Documents:** Select the document list under **Data**, then choose the **Bar Labels Field** and **Bar Values Field**.
+ - **Numbers Lists:** Set the **Bar Labels** and **Bar Values** lists.
+5. To display another data series, click **Add Data** and configure its **Bar Values**. New data series appear side by side unless **Stack Bars** is enabled.
+6. Under **Chart Properties**, adjust the chart's **Width** and **Height** as needed.
-If you use Firebase as the backend, you can create a collection and add the list of documents. Each document entry can be used to draw bars on the chart. Hence you must add at least two fields (one with DataType String and another with DataType Double) in a document that will act as the labels, and the Y coordinates value to draw a bar.
-
-The figure below illustrates the sample collection that draws the two bars (income and expense) for each year.
-
-
-
-:::warning
-The above collection schema is used for simplification. You are free to have your own schema that works best for you.
+:::tip[Using Firestore Documents]
+To use **Firestore Documents**, [**query a collection**](../../../../control-flow/backend-logic/backend-query/query-collection.md) directly on the **Chart** widget or on a top-level widget such as a [**Page**](../../../pages/intro-pages.md) or [**Column**](../../composing-widgets/rows-column-stack.md).
:::
-Here's how the data is used to draw bars on a chart:
-
-
-
-
-#### 1.2 Numbers Lists
-
-The bar chart widget can draw a bar using a list of labels and numbers. You need at least two separate lists with DataType String and Double. One list stores a list of labels to be displayed on the X-axis, whereas the other stores a list of values on the Y-axis. The chart widget uses both variables to draw the bar.
-
-:::info
-The variable can be an app state variable or the action output variable of an API call.
-:::
-
-The figure below illustrates the sample app state variables that draw the two bars (income and expense) for each year.
-
-
-
-:::warning
-A number of values in the Y-axis variable should match the number of labels in the X-axis variable.
-:::
-
-Here's how the number list is used to draw bars on a chart:
-
-
-
-To create the app state variable, please find the instructions [here](../../../../../resources/data-representation/app-state#create-app-state-variable).
-
-### 2. Adding bar chart widget
-
-To add the bar chart widget to your project:
-
-1. Drag the **Chart** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
-2. Move to the property panel and set the **Chart Type** to **Bar**.
-3. For the Bar Chart, a single **Chart Data** is a **Bar** drawn on the chart. The bar is drawn by providing the data to this. To show the first bar, open the **Chart Data 1** section, and set the **Data Source** to [Firestore Documents](#11-firestore-documents) or [Numbers List](#12-numbers-lists).
-4. If you select **Firestore Documents**:
- 1. Make sure you have access to a list of documents. The list of documents can be retrieved by querying a collection at any top-level widget, such as the **Page** or **Column** widget. You can also query a collection on the Chart widget itself. To query collection on a page:
- 1. Select the **page** and then click on the **Backend Query** tab (on the right side of your screen).
- 2. Set the **Query Type** to **Query Collection**.
- 3. Scroll down to find the **Collection** dropdown and set it to your collection.
- 4. Set the **Query Type** to **List of Documents**.
- 5. To order the labels, you can perform Ordering on a query.
- 6. Click **Save**.
- 2. Set the Source to the **collection_name Documents > Documents (List/)** and click **Confirm** (e.g. *transactions Documents > Documents (List/)*).
- 3. Set the **Bar Labels Field,** whose values will be used as labels, and lay out horizontally from left to right (e.g., day, week, month, year).
- 4. Set the **Bar Values Field,** whose values will be used to draw bars on a chart. This will draw bars for the first chart data (e.g., income data).
-5. If you select **Numbers Lists**:
- 1. Under the **Bar Labels**, click on the **UNSET** and set it to a variable whose values will be used as labels and lay out horizontally from left to right (e.g., day, week, month, year).
- 2. Further options are displayed as per the selected source. For example, if you choose **App State**, The **Available Option** field is displayed that allows you to select the actual variable.
- 3. Under the **Bar Values**, click on the **UNSET** and set it to a variable whose values will be used to draw bars on a chart. This will draw bars for the first chart data (e.g., income data).
-6. Click **Add Data** to show bars for multiple categories (e.g., income and expense). The bars for each new category are displayed next to the previous one. **Note**: When you click **Add Data**, you can only set **Bar Values Field** since the **Bar Labels Field** is already provided in the first **Chart Data**.
-7. Scroll down to the **Chart Properties** section and adjust the **Width** and **Height** properties.
-
-
-
-
-
-
-
+## Customizing the Bars {#customizing-bars}
-## Customizing bars
+### Customizing an Individual Data Series {#customize-bar-for-an-individual-chart-data}
-You can customize the look and feel of bars to match your design.
-
-### Customize bar for an individual chart data
-
-You can customize the bar for each specific chart data to help users easily identify the information.
-
-To customize the bar for each chart data:
-
-1. Select the **Chart** widget from the widget tree or the canvas area.
-2. Move to the properties panel, and open the **Chart Data** > **Bar Properties**.
-3. To change the **Bar Color**, click on the box next to the already selected color, select any dark/light color, and then click **Use Color** or click on an already selected color and enter a Hex Code directly.
-4. To add a border around the bar, enter the **Border Width** value and change its **Border Color**.
+Select the **Chart** widget, open **Chart Data**, then expand **Bar Properties** for the selected data series. Configure it using these options:
+- **Bar Color:** Sets the bar color for the selected data series.
+- **Border Width:** Sets the width of the border around each bar.
+- **Border Color:** Sets the color of the bar borders.
-
+2. Open **Chart Data** and enter a **Legend** name for each data series.
+3. Under **Chart Properties**, enable **Show Legend**.
+4. Open **Legend Properties** to adjust the legend's size, position, background, border, padding, text, and indicator.
+
-### Customizing legend box
+### Change the Background Color
-You can change the appearance of the legend box by following the instructions below:
+The **Chart** widget uses a white background by default. To change it, select the **Chart** widget and choose a color from **Chart Properties > Background Color**.
-1. First, [enable the legend](#showing-legend).
-2. Scroll down to the **Legend Properties** section.
-3. To change the dimension of the legend box, enter the **Width** and **Height** values.
-4. The legend box typically appears over the chart on the bottom right side. To change its position, use the **Horizontal** and **Vertical** **Alignment** slider.
-5. 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.
-6. To customize the border, use the **Border Color**, **Border Width,** and **Border Radius**.
-7. To add space between legend text and its box border, adjust **Padding** property.
-
+Enable **Show Border** under **Chart Properties** to display a border around the chart. Use **Border Color** and **Border Width** to customize its appearance.
-### Changing background color
-
-The default background color for the chart widget is white. To change the background color:
-
-1. Select the **Chart** widget from the widget tree or the canvas area.
-2. Move to the properties panel, and scroll down to the **Chart Properties** section.
-3. 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.
+### Show the Tooltip
+Enable **Show Tooltip** under **Chart Properties** to display the Y-axis value when users interact with the chart. Use **Tooltip Background Color** to customize the tooltip background.
-
-
-### 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
+### Customize the X-axis
-To show the name on the axis, such as day, week, and month:
+Use **X Axis Properties** to configure the axis title and labels:
-1. Select the **Chart** widget from the widget tree or the canvas area.
-2. Move to the properties panel, and scroll down to the **Chart Properties** section.
-3. 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**.
-4. You can also customize the appearance of the name text.
-
-
-
-
-
-
-### 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](#set-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:
-
-1. Select the **Chart** widget, head over to the properties panel, and scroll down to the **Chart Properties** section.
-2. Scroll down to the **X Axis Properties** and enable the **Show Label** option.
-3. When it comes to displaying numbers, it's usually acceptable to show up to two digits as is. However, if the number exceeds that limit, it's recommended to set the **Label Format Type** to **Number** and configure the appropriate **Number Format Options**.
-4. Enter the value in the **Label Interval** input box.
-5. You can also customize the appearance of the numbers.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+- **Text:** Adds an axis title, such as *Day*, *Week*, or *Month*. You can enter static text or set the value from a variable, then customize its appearance.
+- **Show Label:** Displays numbers or labels along the X-axis.
+- **Label Interval:** Controls the spacing between displayed values.
+- **Label Format Type:** Formats numeric labels. To format larger numbers, select **Number** and configure the **Number Format Options**.
:::info
-
-For the bar chart, you can only display labels on X-axis.
-
+For line charts, X-axis numbers are based on **Min X** and **Max X** when [**axis bounds**](#set-axis-bounds) are set; otherwise, FlutterFlow uses the range of the chart data. Bar charts display the labels configured for their data series.
:::
-### 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:
-
-1. Select the **Chart** widget from the widget tree or the canvas area.
-2. Move to the properties panel, and scroll down to the **Chart Properties** section.
-3. 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**.
-4. You can also customize the appearance of the name text.
-
+This example shows how to customize the X-axis title and labels.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+## Customizing the Sections
-## Customizing section
+Select the **Chart** widget, open **Chart Data**, then expand **Pie Chart Properties**. Configure the sections using these options:
-You can customize the look and feel of each section to match your design by following the instructions below:
-
-1. Select the **Chart** widget from the widget tree or the canvas area.
-2. Move to the properties panel, and open the **Chart Data** > **Pie Chart Properties**.
-3. To change the size of the circle, enter the value in the **Pie Chart Radius** property.
-4. To add a border around the section, enter the **Border Width** value and change its **Border Color**.
-5. To create an inner circle (hole) inside the main circle(Donut), enter the size into the **Donut Hole Radius** property.
- 1. To change the **Donus Hole Color**, click on the box next to the already selected color, select any dark/light color, and then click **Use Color** or click on an already selected color enter a Hex Code directly.
-6. To display the section value or its percentage, set the **Section Lable Type** to **Value** or **Percent** respectively.
+- **Pie Chart Radius:** Sets the overall size of the pie chart.
+- **Section Borders:** Use **Border Color** and **Border Width** to style the border around each section.
+- **Pie Chart Colors:** Sets the color of each section. Click **Add Color** to add more colors or use the delete icon to remove one.
+- **Width and Height:** Set the overall chart dimensions under **Chart Properties**.
+- **Show Legend:** Displays a legend that associates each section label with its color.
+- **Donut Hole Radius:** Adds an inner circle and sets its size, turning the pie chart into a donut chart.
+- **Donut Hole Color:** Sets the color of the inner circle.
+- **Section Spacing:** Sets the space between adjacent sections.
+- **Start Angle:** Sets the angle at which the first section begins.
+- **Section Label Type:** Choose **None** to hide labels, **Value** to display the section values, or **Percent** to display their percentage of the total. When labels are enabled, use **Label Position**, **Label Format Type**, and **Section Label Style** to configure the theme text style, font family, font weight, font size, text color, alignment, and shadows.