Skip to content

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 download the entire source code used in this section from the GitHub repository.

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:

Styling a line chart

Text above plot

You can download the entire source code used in this section from the GitHub repository.

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

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