# Timeline

## Purpose & Application

This chart is generally used to represent a significant event for an institution or a particular individual.

This chart shows events descriptions and images in a carousel-like fashion way with a slider that allows the selection of the date.

> 📝 For example, I want to see the milestones of my project since the launching date

## Key Features

* **Media and communication** tool, this is what Toucan is! 📅 Every story has a timeline, a chronology, and is made of a series of events. Use the timeline to properly show it.

> Let’s say we are on a Advertising monitoring application, most of your stories are showing advertising results and impacts. Wouldn’t be cool to have a visual summary of all advertising made?

* **Easy to configure**, just follow the steps from the Studio, and you’re all set. We take care of the design for you 🙌

> Remember those nights editing a ppt and having to move/re-align every image and text? Gone 🤩

* **Easy to use**, your users won’t have any trouble navigating thru time with our slick design and mobile display. 🤳

## Configuration

*To display events related to time in exhaustive way*

<mark style="color:red;">**\***</mark>**&#x20;Mandatory paramers**

| Section      | Option                                       | Description                                                                                                    |
| ------------ | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
|              | Dataset<mark style="color:red;">\*</mark>    | Select the dataset used by the chart                                                                           |
|              | Start Date<mark style="color:red;">\*</mark> | Select the column that contains containing the date for each event                                             |
|              | Headline<mark style="color:red;">\*</mark>   | Select the column that contains a short title display for each event                                           |
|              | Text<mark style="color:red;">\*</mark>       | Select the column that contains the description of each event                                                  |
| Legend       | Additional info                              | Add another column for more information on the legend                                                          |
| Enrich Chart | Media                                        | Select the column that contains the URL or the name of the asset in Toucan                                     |
| Enrich Chart | Media Type                                   | Select the column that contains the type of media \| The column should contain `external` or `asset` as values |
| Enrich Chart | Image's legend                               | Select the column that contains a text to be displayed under the image/media                                   |
| Enrich Chart | Content                                      | Select the column that contains additional content to be display under the description                         |
| Display      | Size                                         | Define the chart size when having multiple ones                                                                |
| Display      | Mobile Size                                  | Define the chart size when having multiple ones on mobile                                                      |
| Display      | Custom CSS Class                             | Set a custom CSS class to target this specific chart with CSS                                                  |
| Tutorial     | Tutorial                                     | Set a tutorial to help your users to understand the chart by giving him an id and a message                    |


---

# 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/legacy-viz-designs/timeline.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.