> For the complete documentation index, see [llms.txt](https://docs.shimoku.com/dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shimoku.com/dev/elements/charts/line-charts/line.md).

# Line

## **The Line Chart** <a href="#the-line-chart" id="the-line-chart"></a>

Suppose you have continuous data that you would like to represent through a chart. A line chart is a good option. The **line chart** is especially effective when trying to identify a trend or pattern in your data.

### The Method To Use <a href="#the-method-to-use" id="the-method-to-use"></a>

The method is `s.plt.line()`.

It must contain the following input variables:

```python
x: str
order: int
data: Union[str, DataFrame, List[Dict]]
```

Accepts the following input variables as optional:

```python
y: Optional[List[str]]
x_axis_name: Optional[str]
y_axis_name: Optional[str]
title: Optional[str]
rows_size: Optional[int]
cols_size: Optional[int]
padding: Optional[List[int]]
show_values: Optional[List[str]]
option_modifications: Optional[Dict]
variant: Optional[str]
```

## Examples <a href="#examples" id="examples"></a>

### 1. Default Configuration <a href="#id-1.-default-configuration" id="id-1.-default-configuration"></a>

If the code runs with data, menu\_path and axes configured as this:

```python
data = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 3},
    {'date': dt.date(2021, 1, 2), 'x': 5, 'y': 7},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 6},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5},
]

s.plt.line(
    data=data, order=0, x='date',
    rows_size=2, cols_size=12,
)
```

<figure><img src="/files/D9AOcd3Brk8mblnd6xaZ" alt=""><figcaption><p>Resulting line chart with default configuration</p></figcaption></figure>

### 2. Customization And Context <a href="#id-2.-title-axes-names-legend-and-use-of-option_modifications" id="id-2.-title-axes-names-legend-and-use-of-option_modifications"></a>

It is possible to personalize the title of the chart, adding data points, name for each axis, the legend, size and space occupied. One example could be obtained using:

```python
data = [
    {'date': dt.date(2021, 1, 1), 'new': 4, 'vac': 5},
    {'date': dt.date(2021, 1, 2), 'new': 7, 'vac': 6},
    {'date': dt.date(2021, 1, 3), 'new': 4, 'vac': 7},
    {'date': dt.date(2021, 1, 4), 'new': 9, 'vac': 8},
    {'date': dt.date(2021, 1, 5), 'new': 3, 'vac': 9},
    {'date': dt.date(2021, 1, 6), 'new': 6, 'vac': 2},
]

s.plt.line(
    data=data, x='date', order=0,
    rows_size=2, cols_size=9, padding='0,0,0,2',
    title='Positive Results in the first six days - January',
    option_modifications={'dataZoom': {'show': True}, 'toolbox': {'show': True}},
)
```

![Adding a title, legend, and other personalization. Note the space before the component using padding='0,0,0,2'.](/files/lk0TIvWUCRj2rc1CRNjP)

## Variants

By setting the parameter `variant` to the following values the appearance of the chart can be changed:

{% tabs %}
{% tab title="Clean" %}

<figure><img src="/files/1a7FsFlXGIDt4Su57d47" alt=""><figcaption><p>variant="clean"</p></figcaption></figure>
{% endtab %}

{% tab title="Minimal" %}

<figure><img src="/files/eU6Pbyl9DFGKdKP4qJRs" alt=""><figcaption><p>variant="minimal"</p></figcaption></figure>
{% endtab %}
{% endtabs %}

## Interesting Usages

* Tracking trends over time: Line charts are ideal for tracking trends over time. For example, you could use a line chart to show how the stock price of a particular company has changed over the years.

  <figure><img src="/files/0K0VXoEcXRtvIGhSeVct" alt=""><figcaption></figcaption></figure>
* Comparing data: Line charts can also be used to compare a variable in different environments. For example, you could use a line chart to show how the temperature evolves in different cities.

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

{% hint style="info" %}

## Featured Content

[Changing the Menu Path](/dev/building-web-app/menu/changing-the-menu-path.md)\
The `menu_path` can be modified.<br>

[Using the Grid](/dev/building-web-app/grid/using-the-grid.md)

It is possible to use any number of rows.
{% endhint %}


---

# 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.shimoku.com/dev/elements/charts/line-charts/line.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.