# 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 %} | | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs-v3.toucantoco.com/visualizations-and-layouts/creating-visualizations/viz-gallery/new-viz-designs/linechart.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.