Line Plots in Gradio

The LinePlot component

In this chapter, we will be exploring how to visualize our data in Gradio. Let’s get started!

We can create line plots using the component LinePlot. This is relatively straightforward, and it expects a pandas DataFrame, from which it will create a line plot in Gradio. A LinePlot can be instantiated with gr.LinePlot() or with Interface string shortcut ‘lineplot’.

It is worth noting that unlike most components we have seen so far, a LinePlot component can not be passed as input into a function. If it is an output, it expects the function to return a pandas dataframe with the data to plot.

The most important parameters that LinePlot requires are the value, x, and y. The value is the pandas DataFrame containing the data to display. x is the column in DataFrame corresponding to the x-axis and y is the column in the DataFrame corresponding to the y-axis.

There are other parameters that allow us to tailor the line plot further, such as adding a graph title (title), customizing the x and y titles (x_title and y_title), setting the x- and y-axis limits (x_lim and y_lim), overlaying points (overlay_point) and more.

Event Listeners for LinePlot

LinePlot supports two types of Event Listeners:

• gr.LinePlot.change(fn, ...): This event is triggered when the value of the plot changes either because of the user input or because of a function update.

• gr.LinePlot.clear(fn, ...): This is triggered when the user clears the plot using X button for the component.

Property viewer app: Historical price growth

In this example, we will build a page summarising a suburb’s key statistics.