Line

Line charts

Line plots are a widely-used representation that connects distinct data points, showing trends.

The Basic concepts section already shows a handful of examples showing line charts. This section focuses on customizations that are relevant to this type of chart only.

Key properties

Name	Value	Notes
mode	lines	Overrides the default lines+markers
x	x values
y	y values
line	Style for the line
color	Color for the line
text	Text to display

Examples

Styling lines

See the entire code for this example

You can style plots using the line[] and color[] properties.

Say we have captured daily temperature measurements: the mean, maximum and minimum values for every day. This data set can easily be stored in a dictionary that Taipy will convert to a Pandas DataFrame:

data = {
    "Date": pandas.date_range("<start-date>", periods=100, freq="D"),
    "Temp°C": [-15,-12.9,...100 records total...,7.2,10.2],
    "Min": [-22,-19.7,...100 records total...,2.7,6.5],
    "Max": [-8.6,-8.2,...100 records total...,12.,13.5]
}

We want to customize the style of the different traces so the chart is easier to read. We will display the 'Max' trace in red, the 'Min' trace in blue and apply a dash style to the 'regular' temperature plot.

Here is the definition of the chart control:

Definition

MarkdownHTMLPython

<|{data}|chart|mode=lines|x=Date|y[1]=Temp°C|y[2]=Min|y[3]=Max|line[1]=dash|color[2]=blue|color[3]=red|>

<taipy:chart mode="lines" x="Date" y[1]="Temp°C" y[2]="Min" y[3]="Max" line[1]="dash" color[2]="blue" color[3]="red">{data}</taipy:chart>

import taipy.gui.builder as tgb
...
tgb.chart("{data}", mode="lines", x="Date", y__1="Temp°C", y__2="Min", y__3="Max", line__1="dash", color__2="blue", color__3="red")

The page now shows the following chart:

Styling a line chart

Text above plot

See the entire code for this example

It is sometimes useful to provide textual information on top of a plot. Here is how to do that in the context of a line chart.

We want to display the index of the relevant week at the approximate location of a temperature data point.
We can use the text[] property to do just that: a text will be displayed at the relevant (x, y) location.

We can reuse the dataset of the example above and add a column to the data dictionary, holding the week number as a text:

data = {
...
"WeekN": [f"W{i//7}" if i%7==0 else None for i in range(0, 100)]
...
}

Note that this new column (WeekN) is mainly filled with None values: we only add text information on Sundays.

Let us use this column as a source for displaying text in our chart:

Definition

MarkdownHTMLPython

<|{data}|chart|x=Date|y[1]=Temp°C|y[2]=Max|mode[2]=text|text[2]=WeekN|>

<taipy:chart x="Date" y[1]="Temp°C" y[2]="Max" mode[2]="text" text[2]="WeekN">{data}</taipy:chart>

import taipy.gui.builder as tgb
...
tgb.chart("{data}", x="Date", y__1="Temp°C", y__2="Max", mode__2="text", text__2="WeekN")

We use the mode[] indexed property to indicate that, for the second trace, we want to display the text itself.
This definition allows the display of the texts contained in the 'WeekN' column (the text[2]) property at the y coordinate indicated in the 'Max' column (the y[2]), as raw text (the mode[2] property).

Here is the resulting chart:

Line and text