# Annotation Chart (ToDo)

An annotation interactive timeline chart is a type of chart that visualizes a series of events or milestones over a period of time. It typically consists of a horizontal timeline with markers or events plotted along the timeline, and it allows users to add annotations or notes to the chart to provide additional context or information.

Here is an example of an Annotation chart with sample data. This chart shows a series of events that have occurred over a six-month period. The x-axis represents the date of the event, and the y-axis represents the event itself. The user can add annotations to the chart to provide additional context or information about the events. For example, the user might add an annotation to provide more details about the marketing campaign, or to highlight the impact of the sales increase on the company's revenue.

<br>

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FNbW6OTwISZ4BsTLtsk2m%2Fline.png?alt=media&#x26;token=bf2b4442-fa26-49fc-95d9-5a2a44548866" alt=""><figcaption></figcaption></figure>

**Sample data:**

| Time Period | Sales ($) | Profit ($) |
| ----------- | --------- | ---------- |
| Jan 2020    | 100,000   | 10,000     |
| Feb 2020    | 110,000   | 8,000      |
| Mar 2020    | 120,000   | 12,000     |
| Apr 2020    | 130,000   | 14,000     |
| May 2020    | 140,000   | 8,000      |
| Jun 2020    | 150,000   | 6,000      |

### **How-to build a line chart?**

1. Navigate to [*Add New Chart*](#1.-navigate-to-add-new-chart-screen) screen
2. [Select data](#2.-select-a-data-source) source
3. [Select "Line Chart" type](#4.-select-chart-type-from-gallery) from gallery
4. [Configure ](#configuration)and [customize ](#line-chart-customization)the chart to create the desired visualization.

### Line chart configuratio&#x6E;**:**

The configuration shown illustrates how to map the time period on the x axis and the profit and sales on the y axis to generate the line chart.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FvV5fCf0qSa1pqlWmHxUk%2Fimage.png?alt=media&#x26;token=e407da99-c7cd-42d2-9f97-9b7d91c002f3" alt=""><figcaption><p>Sample Line chart data mapping</p></figcaption></figure>

### Line chart customization options

Infinity offers many customization options for your chart. To access these options, click on the customize tab in the chart builder screen. This will display a list of customization options.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FziFB0Myw8d573bCq4sdy%2Fimage.png?alt=media&#x26;token=c0f8d359-ca0c-4219-b0d8-6556d31fd554" alt=""><figcaption></figcaption></figure>

Here is a list of notable customization options for the line chart.

| Feature                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Aggregation                  | <p>To create an aggregation, click on the data series chip in the data mapping section and choose the desired aggregation. </p><p></p><p><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FGh8ajADCUMuEBud2j0bX%2Fimage.png?alt=media&#x26;token=69b5b059-89cc-49ff-beb7-7e02217f9652" alt=""></p><p></p><p>There are various aggregation options available based on the data type.</p>                                                                                               |
| Renaming the Data Series     | <p>To rename a data series, click on the data series chip in the data mapping section. A pop-up will appear, allowing you to change the name and any aggregation options.</p><p></p><p><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FnAMPjYOb6BrttajSIRMZ%2Fimage.png?alt=media&#x26;token=33f696cc-503e-42ab-880a-0836f125092d" alt=""></p>                                                                                                                                      |
| Dual Axes or Right hand Axes | <p>To enable dual axes, follow these steps:</p><ul><li>Click on the customization tab.</li><li>Click on series.</li><li>Select the series that you want to plot on the right-hand axes.<img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FwJJP4ZamGYO0KmscEUhy%2Fimage.png?alt=media&#x26;token=466da28f-940b-4199-8a99-d4c4e305bd45" alt=""></li></ul>                                                                                                                                |
| Titles                       | <p>To change the titles, follow these steps:</p><ul><li>Click on the customization tab.</li><li>Click on the horizontal (or) vertical axes.</li><li>Proceed to change the titles.</li><li>You will also have the option to modify the font attributes.<img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FFcLpomwZEaNzQ8VE6yWw%2Fimage.png?alt=media&#x26;token=865dad6e-4004-48b3-8622-62d0faca34e6" alt=""></li></ul>                                                                 |
| Chart Background             | <p>To change the chart background, follow these steps:</p><ul><li>Click on the customization tab.</li><li>Click on the chart background.</li><li>Proceed to selecting the desired color.</li></ul>                                                                                                                                                                                                                                                                                                                                                                    |
| Padding and Zoom             | <p>To change the padding and zoom, follow these steps:</p><ul><li>Click on the customization tab.</li><li>Click on the padding and zoom accordion.</li><li>Proceed to customize the padding and zoom attributes for your chart.</li></ul>                                                                                                                                                                                                                                                                                                                             |
| Legend                       | <p>To customize the legend, follow these steps:</p><ul><li>Click on the customization tab.</li><li>Click on the legend accordion.</li><li>The platform offers four legend options: top, bottom, right, or none.</li><li>You can also configure the legend font here.</li></ul>                                                                                                                                                                                                                                                                                        |
| Axes                         | <p>To customize the axes, follow these steps:</p><ul><li>Click on the customize tab.</li><li>Select the desired axes (horizontal for X, vertical for Y, and right vertical for secondary Y).</li><li>Proceed to changing the title, fonts, labels, order of axes, scale, or even add formatting such as $ or %.</li></ul><p><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2Fg62uyJgQLoEPRjWhN398%2Fimage.png?alt=media&#x26;token=30449531-e9b2-4ba0-b3fc-acd099301af7" alt=""></p> |
| Gridlines                    | <p>To change the grid lines, follow these steps:</p><ul><li>Click on the customize tab.</li><li>Select the gridlines accordion.</li><li>Select the orientation (i.e. vertical or horizontal).</li><li>Update/customize the count and colors of the gridlines.<img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2Fgo9qKO7uf0mVkbn9bd0K%2Fimage.png?alt=media&#x26;token=64ffbda2-56e8-497a-b80a-51ab1d339e4f" alt=""></li></ul>                                                          |

**Useful Tips:**

* Use a consistent scale for the y-axis to accurately compare data points
* Consider using a legend to label multiple data series on the same chart
* Use a clear and concise title to describe the data being displayed
* Avoid cluttering the chart with too much data or unnecessary elements
* Use a meaningful and appropriate time scale for the x-axis (e.g., days, weeks, months, years)
