# Creating Line and Area Plots (Standard & Radar)

Learn how to create Line and Area plots in ActiveReportsJS.

## Content

## Introduction

Before creating and configuring **Line, Area, Radar Line, or Radar Area Plots**, make sure you have 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 Line, Area, Range Area, Radar Line, or Radar Area Plot type**, choose the dataset to visualize, and proceed to the **next page**. 

## Plot Settings

The `Settings` page of the `Chart Wizard` for **Line, Area, Radar Line, and Radar Area Plots** structured as shown below:
![image](https://cdn.mescius.io/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.cba7a1.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 **vertical positions of symbols** that form a **Line Plot**.  
- the **vertical positions of the filled area boundary** in an **Area Plot**.  
- the **radial positions of symbols** along radial lines extending from the center in a **Radar Line Plot**.  
- the **radial positions of the filled area boundary** in a **Radar Area Plot**.  

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 **Multiple Line Plot**, as demonstrated in the  [Multiple Line Plot Demo](https://developer.mescius.com/activereportsjs/demos/Reports/MultipleValuesLinePlot/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 ensures that line colors and area fill colors correspond to their respective data values in the legend. Additionally, you can customize the displayed names using the **Caption** property for each data value item. For **Range Area Plots**, data values are defined as pairs of **Lower** and **Upper** bounds, specifying the range for each category. 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.

### 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, that defines **subgroups**, such as different product types or sales channels, for each category.
* **Sort Direction:** Specify whether series groups are sorted in **Ascending** or **Descending** order.
* **Example:** A **Multiple Line Plot** groups data into separate lines based on a selected field. For example, a sales report may display separate lines for **Online Sales** and **Store Sales** over time. You can see a detailed example in the [Multiple Line Plot Demo](https://developer.mescius.com/activereportsjs/demos/Reports/MultipleLinePlot/purejs).

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.