> ## 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 Stacked Bar Chart

## Creating a Stacked bar Chart

In this guide, we'll walk you through the process of creating a Stacked bar Chart. This type of chart is best used to represent and compare categorical data across multiple categories .The bar is then divided into segments, each representing a category, and the length of each segment is proportional to the value of that subcategory within the overall category. The segments are stacked on top of each other to show the composition of the category.

We have two ways of creating a stacked bar chart.

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. Heatmaps Colors](#7-Heatmaps-Colors)
* [8.  Choose Type of X Axis](#8-choose-type-of-x-axis)
* [9. Add subqueries](#9-add-subqueries)

## First method  - Using subqueries

# 1. Access the Dashboard

To start creating a Pie chart, you'll first need to access your dashboard folder. Dashboard folders are located on the right green sidebar of the Web App.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 "Stacked bar chart"

![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_1oygexf.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 (w_s_v_s, Weekly/daily/monthly sales vs stock) 

![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_8kca92.png)

# 4. Add a Chart Title

Now, add a title for your chart. This title should represent what the chart is about. For example,you might choose a title like "Weekly/daily/monthly sales vs stock".


![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_19xiil0.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/weekly/monthly sales "

![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_99tuy9.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.
-**Grouped mode**: When this is on, it means that the bars for the different values will not be stacked on tock of each other but presented as separate bars instead.


![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_1x6i3tg.png)

# 7. Heatmaps Colors

Choose the position of the legend. The Legend is helps providing context and clarity to the information being presented. 

![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_128520e.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** .


![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_vdpofu.png)


#  9. Add subqueries
This method calculates the values to be displayed separately. Click on **Add Option** to add your first subquery. The label field should have the name of the value to be displayed


![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_ydbta5.png)

**Sales subquery**

![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_1h2t25l.png)

**Stock subquery**


![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_1uaddrt.png)

By this method, you don't need to define the main or row query.

Ensure that your query is structured correctly and returns the expected results.


## Second method - Using the Row and Main Query

**Row query**
First you need to define what you want to use as your row query. This is the part you define the categories that will act as the labels of the different entities in the chart. For example in a chart where you want to compare daily sale and stock, in the row query you need to define the labels as 'Stock' and 'Sales'. See below,


![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_r2h1ln.png)

**Main query**
In the main query, you need to define the X and Y axis in the main query but before that , you need to create subqueries that calculate the different entities separately in our case sales and stocks. The subqueries will be joined by the **UNION ALL** function. The X axis can be Time or Text depending on the filed used in the axis.

![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_h0cvo6.png)

**Final chart**

![](https://storage.crisp.chat/users/helpdesk/website/eccae9ddfa738000/image_1flc7c5.png)


Add filters accordingly to refine the data you want to display.


