# Linechart
## 🧭 Overview Line charts are used to display trends over time, track changes, and highlight patterns in continuous data. They provide a clear visual representation of data fluctuations, making it easy to identify upward or downward trends. Line charts simplify the analysis of temporal relationships, offering a straightforward way to visualize how data evolves, allowing for quick and accurate insights. > 📊 Example Use Case > > * Sales performance over time > * Website traffic monitoring > * Customer churn rate analysis > * Product usage tracking > * Financial market trends > * Energy consumption monitoring > * Employee productivity over time ### ⭐ Key Features Generally used for *temporal data*, the line chart is perfect for visualizing how values evolve over a continuous period. 📝 *Example: Track the evolution of your sales throughout the year.* Line charts are ideal for displaying quantitative values over time, helping you: * Visualize **trends and interconnections** between data points. * Gain a **global view of a specific period** and assess growth or decline. * **Identify patterns** and make data-driven decisions based on historical trends. 📌 *Tip:* To keep your chart clear and readable, limit the visualization to **a maximum of 3 lines**. ## Configuration {% tabs %} {% tab title="New Linechart" %} **Learn how to create a linechart using the new design with this step-by-step guide.**\ Explore the interactive walkthrough below to get started quickly, then dive into the full configuration reference table for in-depth details. {% @arcade/embed url="" flowId="qQIn6SArZFMI54bM5NZV" %} **Chart Configuration Step-by-Step** | | Option | How does it work? | | ------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Dimension** | | | | | X-Axis | The X-Axis corresponds to a column in your dataset, such as ‘Product Type' or 'Date’. | | | Categorize by line | This option enables you to add multiple lines to your chart, based on the values of a single column. | | | Change date format | You can change the display format by selecting an option from the dropdown. Common D3 formats are suggested. *Note: Your column must be in a date format for this option to work.* | | **Measure** | | | | | Line Y-Axis | The Y-Axis represents a numerical column from your dataset. You can select an aggregation method from the menu, which may vary depending on the chart type. | | | Precision |

Precision determines the level of detail in how your values are displayed. By default, measures use a .2f format, meaning they are shown with two decimal places.

Example:
A value of 3.14159 will be displayed as 3.14 when using .2f formatting.

| | | Unit | Unit represents the total quantity or category being measured for a KPI. It defines what the values correspond to, providing context for better interpretation. | | | Show value on line | Displays all values above the line for easy visibility. | | **Additional parameters** | | | | | ID | Unique chart Id | | | Add complementary value | The complementary value is displayed in the data label, providing additional context and making it easier for viewers to interpret the data at a glance. It is possible to add a precision, an unit and a sentiment. | | | Add user chart guide | Lead your chart viewers through the narrative of your data. | | **Chart performance** | | Technical performance | **Style Configuration** | | Option | How does it work? | | ------------ | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | Lines | Customize the line color to align with your branding preferences. | | | Add colored zones |

You can use four different sentiment statuses (positive, warning, negative, and neutral) to create colored background areas by setting a minimum and maximum value, enhancing visual clarity. There are no limits to the number of color zones you can add.

Note: Sentiments can be customized in the app theme.

| | | Enable color gradient | Configure the color gradient to adjust the intensity of a single color, enhancing visual depth and emphasis. | | {% endtab %} | | | {% tab title="Legacy Linechart" %} *New Chart Design* \***Mandatory parameters** | Section | Option | Configuration Tutorial | | --------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | | Dataset\* | Select the dataset used by the chart | | | X Axis\* | Your value for the X Axis | | | Y Axis\* | Your value for the Y Axis | | Multi-linechart | Series label | Display label based on column containing lines name | | Enrich chart | Color zones | Add colored zones. You can add multiple zones one by one | | Enrich chart | Color Zones - Min And Max Value | Enter the minimum and maximum value of your colored zone based on whether a fixed value, from a column or a dynamic value | | Enrich chart | Color Zones - Choose a sentiment color | Choose what color will be displayed in the zone, you can change color coding in the **Color Scheme** menu | | Ticks format | X axis date format | Customize the date display on the X AXis. Use [d3 time format](https://github.com/d3/d3-time-format#api-reference) for this ex. %Y-%m-%d. | | Display | Show all values on line | Display all the values on your linechart. This is not recommended because of display issues that may cause | | Display | Toggle gradient | By default the toggle is activated so that your line chart gets a color gradient | | {% endtab %} | | | {% tab title="New vs. Legacy Configuration" %} | **⭐️ New** | **Legacy** | | ----------------------- | ----------------------- | | **X-Axis** | X axis | | Categorize by line | Multi-line chart | | Change date format | Custom date tick format | | **Line Y-Axis** | Y axis | | Show value on line | Show all values on line | | Add complementary value | Additional info | | Add user chart guide | Tutorial | | Add color zones | Color zones | | Enable color gradient | Toggle gradient | | {% endtab %} | | | {% endtabs %} | |