> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://learn.fieldproapp.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # How to create a Bar Chart ## Creating a Bar Chart In this guide, we'll walk you through the process of creating a Bar Chart. This type of chart is excellent to display and compare the values of different categories or groups. Let's get started! * [1. Access the Dashboard](#1-access-the-dashboard) * [2. Choose the Chart Type](#2-choose-the-chart-type) * [3. Add a Chart Tag](#3-add-a-chart-tag) * [4. Add a Chart Title](#4-add-a-chart-title) * [5. Add a Chart Description](#5-add-a-chart-description) * [6. Configure Chart Options](#6-configure-chart-options) * [7. Heatmap Colors](#7-heatmap-colors) * [8. Choose Type of X Axis](#8-choose-type-of-x-axis) * [9. Configure Scorecard Options (Optional)](#9-configure-scorecard-options-optional) * [10. Display X and Y Axis](#10-display-x-and-y-axis) * [11. Add a Query](#11-add-a-query) # 1. Access the Dashboard To start creating a bar chart , you'll first need to access your dashboard folder. Dashboard folders are located on the right green sidebar of the WebApp.If you don't have a dashboard yet, you'll need to create one by clicking on the yellow icon** Create dashboard**. Once you're in your dashboard, click on the plus (+) button under the **Add chart ** ![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/screenshot-2023-08-03-at-45300_17xqzpx.png) # 2. Choose the Chart Type A dialog box will appear for you to select the type of chart you want to create. From the dropdown menu, select "Bar chart" ![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_pin2ly.png) # 3. Add a Chart Tag Next, you'll need to add a chart tag. This tag should be unique and separated by underscores if it comprises of more that one word / letter e.g (t_s_v_p_d, total_sales_value_per_day) ![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_1hgjoc0.png) # 4. Add a Chart Title Now, add a title for your chart. This title should represent what the chart is about. For example, if your chart is about sales per channel, you might choose a title like "Total sales per day". ![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_z9rsci.png) # 5. Add a Chart Description Add a description for your chart. This helps other users understand what the chart is about and what the query does. For example, you might write "daily sales " ![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_1nnu403.png) # 6. Configure Chart Options In this step, you'll configure various options for your chart: - **Percentage**: Toggle this on if you want to show the values as percentages. - **Force the Display of the Chart in Full Width**: Toggle this on if you want the chart to extend to the full width of the chart. ![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_15ryau5.png) # 7. Heatmap Colors Choose the range of colors for your heatmap. The order of colors matters as it will determine the gradient of your the bar chat. Typically, you'd start with a lighter color representing lower values and end with a darker color for higher values. ![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_1491966.png) # 8. Choose Type of X Axis Select the type of X axis based on your dataset. If you're aiming to display category values like sales per user, then **Text** will be applicable since you are aggregating per user. However, if you are aggregating over time i.e. **Day or Hour** then the X axis will me **Time** . # 11. Add a Query Add a query that will fetch the data for your chart. This query should return values aliased as "x" for the horizontal axis and "y" for the vertical axis. For instance: You can choose to display the name of the axis eg in this case, Date for the X axis and Sales for Y axis. ![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_g0xveb.png) Ensure that your query is structured correctly and returns the expected results. ![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_1gnn1jv.png) || Add filters accordingly to refine the data you want to display.