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¶
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
<|{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:


Text above plot¶
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)]
...
}
Let us use this column as a source for displaying text in our chart:
Definition
<|{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:

