layout.skipToContent

How to add custom areas to Line Chart

This tutorial guides you through adding areas to your linechart to highlight specific time periods.

applicationUI.publishedAt 6 de mayo de 2026
1. Introduction

You will learn how to define date ranges, label them, and customize their appearance for better data visualization.

Introduction
Introduction
2. Access Chart Settings

Click the settings option to modify chart features.

Access Chart Settings
Access Chart Settings
3. Select Area Configuration

Click the area configuration tab to add new areas.

Select Area Configuration
Select Area Configuration
4. Add New Range

Click "Add range" to start defining a new area on your linechart.

Add New Range
Add New Range
5. Open Range Selector

Click the range selector to specify the time period for the area.

Open Range Selector
Open Range Selector
6. Choose Start Date

Click the start date to set the beginning of the range.

Choose Start Date
Choose Start Date
7. Enable Text Display

Click to enable text display on the selected range.

Enable Text Display
Enable Text Display
8. Select Text Option

Click "Text" to configure the label for the area.

Select Text Option
Select Text Option
9. Turn Text On

Click "on" to activate the text label visibility.

Turn Text On
Turn Text On
10. Access Text Label Settings

Click "Text" again to adjust the range text properties.

Access Text Label Settings
Access Text Label Settings
11. Select Range Text Field

Click "Range text" to enter the label for the area.

Select Range Text Field
Select Range Text Field
12. Open Color Settings

Click to access color options for the range areas.

Open Color Settings
Open Color Settings
13. Enter Color Name

Fill the color field to specify the desired color.

Enter Color Name
Enter Color Name
14. Confirm Color Selection

Click "Inter" to apply the selected color to the range.

Confirm Color Selection
Confirm Color Selection
15. Save your changes

Don't forget to save your changes.

Save your changes
Save your changes

You have successfully added areas to your linechart.