# Creating Column, Bar, Polar, & Spiral Plots

Learn how to create Column and Bar plots in ActiveReportsJS, including clustered, stacked, percentage-stacked, and range variations. 

## Content

## Introduction  
Before configuring `Column`, `Bar`, `Polar`, and `Spiral` plots, make sure you've added a chart to your report. For instructions on adding a chart and launching the `Chart Wizard`, see [Adding a Chart](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#adding-a-chart). Once the `Chart Wizard` is open, **select the Bar, Column, Range Bar, Range Column, Polar, or Spiral plot type**, choose the dataset to visualize, and proceed to the **next page**.  
## Plot Settings  
The `Settings` page of the `Chart Wizard` for `Column`, `Bar`, `Polar`, and `Spiral` plot types looks like the following:  
![image](https://cdn.mescius.io/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.3c5466.png)  

It is divided into three sections:  
### Data Series  
The **Fields** [collection](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#collection) defines the **Data Values** you want to visualize. These values determine the following visual properties:  
- the **column height** for `Column` plots  
- the **bar length** for `Bar` plots  
- the **sector length (radial extent)** for `Polar` plots  
- the **arc length along the spiral** for `Spiral` plots  

Typically, each value is an [aggregate expression](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/Functions/aggregates), such as `{Sum(SalesAmount)}`.  
Adding multiple data values creates a **clustered plot**, as demonstrated in the [Clustered Column Demo](https://developer.mescius.com/activereportsjs/demos/Reports/ClusteredColumnPlot/purejs).  
To enhance clarity, you can set the **Legend Mode** property of the [Color Legend](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend#color-legend) to `Data Values`. This option provides a legend that matches the column or bar colors with the corresponding data value names.  
Additionally, you can customize the displayed names using the **Caption** property for each data value item.  
For **Range Bar** and **Range Column** plots, data values are defined as pairs—**Lower** and **Upper** bounds—because these plots require a range. A single pre-filled value pair is provided by default, and you can add more pairs if needed. Each pair determines the starting and ending positions of the plot elements. This configuration is useful for visualizing ranges, such as temperature fluctuations or revenue intervals, across categories.  

![image](https://cdn.mescius.io/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.4b8172.png)  

### Category Groups  
- **Field:** Choose the field, or specify an expression, used to group the data into categories. For example, categories could represent months, regions, or product types. Data values are displayed for each distinct category.  
- **Sort Direction:** Specify whether categories are sorted in `Ascending` or `Descending` order.  

### Series Groups  
- **Field:** Select the field, or specify an expression, used to create subgroups within each category, such as breaking sales data into product types.  
- **Break-down Method:** Choose how to display subgroups:  
  - **Cluster:**  
    - For `Column` and `Bar` plots: Displays subgroups **side-by-side** within each category.  
    - For `Polar` plots: Places subgroups **adjacent to each other along the same radial axis**.  
    - For `Spiral` plots: Arranges subgroups **sequentially along the spiral path, maintaining distinct arcs**.  
  - **Stack:**  
    - For `Column` and `Bar` plots: Stacks subgroups **vertically (columns)** or **horizontally (bars)**.  
    - For `Polar` plots: Stacks subgroups **radially outward**, extending from the center.  
    - For `Spiral` plots: Stacks subgroups **along the spiral path**, layering arcs in sequence.  


Once you have configured the **Data Values**, **Category Groups**, and **Series Groups**, click `Next` to proceed to the [Preview and Final Adjustments](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#preview-and-final-adjustments) page to complete the chart creation.