> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/self-service-visualization-6/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/self-service-visualization-6/chart-gallery/line-chart.md).

# Line chart

The line chart connects individual numeric data points to create a sequence of values. They are primarily used to display trends over a period.

{% hint style="success" %}
*Check out the illustration on applying Line chart properties to View.*
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxZF8YGlESz97qqyTOJvz%2Fuploads%2FlLqE547LOTr2thTqLY9H%2FLine%20chart.mp4?alt=media&token=aee8c985-f350-4cc1-ad74-7611b6b9a57c>" %}
***Applying various Line chart Properties to a View***
{% endembed %}

* **Best Situation to use Line Charts:** View trends in data over a period
* **Examples:** To indicate increasing revenue or varying stock price
* **Variations of this chart**
  * **Mixed Chart**- Combine a line graph with column charts to provide visual cues for further investigation
    * **Example:** A column chart representing the numeric score of students combined with the line chart corresponding proficiency score.

<figure><img src="/files/JU5U4LuaGIdeNjrPJJOh" alt=""><figcaption><p><em><strong>Default View using the Line chart</strong></em></p></figcaption></figure>

## **Properties** <a href="#properties" id="properties"></a>

### **General Settings**

* **Style**: Select a style to display the data (the provided choices for this field are Cluster, Stack, Stack Percentage, Stack Overlaid)
* **Order**: Select a sequence for displaying information
  * None (default option)
  * Ascending
  * Descending
  * Manual Sort (Users need to sort the dimensions by using the indicator signs manually)
    * (If the user selects the ***Manual Sort*** as the ordering option, they get an icon clicking which the Manual Sort window appears)
  * By selecting an order (ascending or descending), the user needs to configure the following fields:
    * Order By- Select a value option from the drop-down menu to order the sequence of the data.
    * Limit- Set a number to display the requested data by this limit.
* **Exclude Global Filter**: The view gets excluded from the Global Filter condition by putting a checkmark in the box.
* **Show Data Label**: The data label is displayed using a checkmark in the given box.
* **Enable Base Zero**: Base value gets presented from Zero using a checkmark in the given box.
* **Show Point**: Enable the Show Point option using a checkmark in the given box.
* **Line Form**: Select a line format from the drop-down menu (the provided choices for this field are Curve and Segment)
* **Show Legend**: Displays legend by turning on the radio button. After enabling ‘Show Legend,’ users need to select the following information:
* **Legend Style**: Select one of the following options using the drop-down menu.
  * Fixed
  * Floating
* The following fields appear when the selected ***Legend Style*** option is ***Fixed***.
  * **Legend Font Size:** This option allows to increase or decrease the font size of the legend.
  * **Legend Orientation**: This option appears when ‘Show Legend’ is enabled, and the selected ‘Legend Style’ is ‘Fixed.’ Users need to select an option out of the given choices using the drop-down menu.
    * Vertical
    * Horizontal
  * **Legend Checkbox**: Enable this option with a checkmark to add the checkbox beside the Legend.
* **Slider**: The slider is displayed by putting a checkmark in the box.

  * **Slider Range:** *Select an option from **Fixed*** or ***Dynamic***
  * **Slider Position**: Select the slider position from the choices such as Default, left, central, and right.

  <figure><img src="/files/75tUtIzr07HsP52PP1hb" alt=""><figcaption><p><em><strong>General Settings</strong></em></p></figcaption></figure>

### **View Filter**

* **Filter**: Select a filter condition using the drop-down menu.

{% hint style="info" %}
*<mark style="color:green;">Please Note:</mark> The selected **View Filter** option will be reflected to customize the View data after adding the View to the report.*
{% endhint %}

### **Category Axis**

* **Title**: Provide a title for the axis.
* **Axis Label**: Enable the category axis label by using a checkmark in the box.
* **Label Angle**: Select a display angle for the axis label.

### **Primary Value Axis**

* **Title**: Provide a title for the Primary Value Axis.
* **Axis Label**: Enable the Primary Value Axis label by using a checkmark in the box.
* **Format Type**: Select a desired format type from the drop-down menu (the provided options for this field are: None, Auto, Percent, Thousand, Lacs, Crore, Million, Billion, Trillion, Quadrillion).
* **Currency Type**: Select a currency symbol to be displayed in the view (the provided options for this field are: None,  Rupees, Euro, Pound, USD, Yen, Cent).
* **Precision**: Set the after-decimal value (It displays up to 5 precision).

<figure><img src="/files/VkxZNxttV6qxhiJMDOCd" alt=""><figcaption><p><em><strong>View Filter, Category Axis, and Primary Value Axis</strong></em></p></figcaption></figure>

### **Secondary Value Axis**

Properties for the Secondary Value Axis are displayed when two measures are dragged on the canvas.

* **Enable**: Put a checkmark in the box to enable the Secondary Value Axis.
* **Title**: Provide a title for the Secondary Value Axis.
* **Format Type**: Select a desired format type from the drop-down menu (the provided options for this field are: None, Auto, Percent, Thousand, Lacs, Crore, Million, Billion, Trillion, Quadrillion).
* **Currency Type**: Select a currency symbol to be displayed in the view (the provided options for this field are: None,  Rupees, Euro, Pound, USD, Yen, Cent).
* **Precision**: Set the after-decimal value (It displays up to 5 precision).

{% hint style="info" %}
*<mark style="color:green;">Please Note:</mark>*

1. *You don't get the **Currency Type** field when the selected Format Type is **Percentage**.*
2. *The users must configure the* [***Series Properties***](/self-service-visualization-6/design-canvas/series-properties.md) *of the dragged measure after enabling the **Secondary Value Axis** to display the same in the chart.*
   {% endhint %}

### **Insights**

* **Text:** Provide any information regarding the chart. If any digit or character is required to be highlighted, put it inside two asterisks. (E.g., \*70%\* or \*skills\*).
* **Font Size:** Set/modify the Font Size of the Insights text.
* **Font Color:** Select a Font color for the Insights Text.
* **Text align:** There are three alignments to align the text.
  * Left
  * Right
  * Centre
* **Position:** There are two options to position the text.

  * Bottom
  * Right

  <figure><img src="/files/GdNnnWn0eJLrLRsS0fXB" alt=""><figcaption><p><em><strong>Secondary Value Axis &#x26; Insights</strong></em></p></figcaption></figure>

<figure><img src="/files/3QuPTwSRAAGIXTWZvasJ" alt=""><figcaption><p><em><strong>The Modified View after applying various Line chart Properties</strong></em></p></figcaption></figure>

## Annotation Settings

Annotation lines in a chart are used to highlight specific points or thresholds for easier analysis and interpretation. They typically represent key events, milestones, or significant values that help provide context or draw attention to important aspects of the data.

{% hint style="success" %}
*Check out the illustration on getting Annotation lines in the Line chart.*
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqcRKh6n896BG051TWTp3%2Fuploads%2FftIcf8ixcf8Edi0gXnWj%2FAnnotation%20in%20the%20Line%20chart.mp4?alt=media&token=46807ea8-f42d-4fd8-ad94-b95ce0bc6ac9>" %}
**Annotation in the Line chart**
{% endembed %}

* Navigate to the dimension and measure panel on the ***Design*** page.
* Select the required dimensions and measures for the given space.
* Click the ***Play*** button.&#x20;

  <figure><img src="/files/rFAeNoW74h57x7P13A2X" alt=""><figcaption></figcaption></figure>
* A View will be plotted based on the selected dimensions and measures.

<figure><img src="/files/S6e8Ng3aAT3A2ujOGLOr" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
*<mark style="color:green;">Please Note:</mark> One of the Dimensions should be with date values. E.g., Event Date is such dimension for this case.*
{% endhint %}

* Click the ellipsis for the dragged Dimension that contains the Date values.
* A window for the dimension will open on the right side of the page.
* The user can set or modify the dimension's Display Name, Date Interval, and Date Format.&#x20;

  <figure><img src="/files/irZBbKaU4JtyKsDTqDaR" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
*<mark style="color:green;">Please Note:</mark> The selected data must be in one of the supported date formats for correctly plotting the View.*&#x20;
{% endhint %}

* Open the ***Chart Properties***.

* Go to the ***Annotation Property*** section.

* Click the ***Select Annotation Type*** option to get the drop-down menu.
  * Select an option from the drop-down. The supported Annotation Types are ***File Upload*** and ***Data Sheet.***&#x20;

* By selecting the ***File Upload*** option, the user will be redirected to upload a file. &#x20;

  <figure><img src="/files/FyNrRdD0bCWsy4Dlp97c" alt=""><figcaption></figcaption></figure>

* Click the ***Choose File*** option.&#x20;

  <figure><img src="/files/QDB3IpSQaxzPvQvNMKT5" alt=""><figcaption></figcaption></figure>

* Choose a file from the system and upload it.&#x20;

  <figure><img src="/files/JxGiC5e89HFMyYi7nhhY" alt=""><figcaption></figcaption></figure>

* The file name of the uploaded file will appear next to the ***Choose File*** option.&#x20;

* Configure the ***Annotation Property*** by adjusting the following fields:
  * **Select Sheet**: Choose the specific sheet to annotate from the drop-down menu.
  * **Label Field**: Specify which field will be used as the label for your annotations.
  * **Annotation Field**: Define the field that contains the annotation data.
  * **Line Color**: Select the color for annotation lines to ensure visibility and distinction.
  * **Tooltip Title**: Set a custom title for the tooltip that appears on hover.
  * **Line Width**: Determine the thickness of the annotation lines to suit your preferences.
  * **Line Opacity**: Adjust the transparency level of the lines for better visual integration with the chart.

* Click the ***Show Annotation*** button.

* Click the ***Annotation*** checkbox.&#x20;

* The Annotation line(s) will appear in the View.

* The user can access the tooltip by hovering the cursor on the annotation line.&#x20;

  <figure><img src="/files/M6k2dHjs695EQL79lCZN" alt=""><figcaption></figcaption></figure>

* The user can access the tooltip by hovering the cursor on the annotation line.&#x20;
  * *All the dates for a common year will be plotted together in a column.  All the dates for a common year will be plotted together in a column.*

<figure><img src="/files/sC5usUcH6nC0MYezQ9BX" alt=""><figcaption></figcaption></figure>

<details>

<summary>Data Sheet as an Annotation Type</summary>

*By selecting the **Data Sheet** option, the user will be asked to choose a Data Sheet from the available list and proceed to the remaining Annotation Property settings.*&#x20;

![](/files/rqVG4P5msT78cfGhtkYx)

*<mark style="color:green;">Please Note:</mark> All the other fields for annotation property remain the same for a Data Sheet when selected as an Annotation T*ype.

</details>

### Threshold Settings

* Show Threshold Line: Put the checkmark in the given box to display the Threshold line on the chart.
* Threshold 1: Set a value to draw the first threshold line.

<figure><img src="/files/9lK4JVqQy7cKn3i1PzWu" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Pwor0qc8N9aN4H3rshwS" alt=""><figcaption><p>Threshold in the Line chart</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.bdb.ai/self-service-visualization-6/chart-gallery/line-chart.md?ask=<question>
```

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.