When working with Plotly, you will need to customize the legend properties such as size, background color, font size, and more.
In this tutorial, we will show you how to customize the legend size of the plots using Plotly.
Let’s get started.
One of the most useful functions in the Plotly ecosystem is the update_layout() function. It allows us to customize the plots in a wide range of properties. Therefore, it is no doubt that we use this function to customize the legend properties.
Let us see how we can use this function to customize the legend.
Showing the Legend
Before we dive into how to resize the legend, let’s start by creating a figure showing the legend.
For this tutorial, we use the gapminder() data provided in the Plotly express. The code is as shown in the following:
df = px.data.gapminder().query("year==2007")
fig = px.scatter(df, x='gdpPercap', y='pop', color='continent', size='pop', size_max=50)
In this example, we create a simple scatter plot using the gapminder() data. Using the update_layout() function, we tell Plotly to display the legend by setting the showlegend parameter to True.
The resulting figure is as shown:
We can see the legend on the top right side of the figure.
Customizing the Legend Size
The best way to customize the size of the legend in Plotly is by customizing the size of the legend items.
This is because Plotly uses a dynamic sizing depending on the item size. For example, to shrink the size of the legend, we can set the fonts of the legend to a smaller font.
An example is as shown in the following:
In this case, we modify the value of the legend title_font_family to ‘Courier New’ and set the font size of the items to 8. This shrinks the legend as shown in the following figure:
Keep in mind that customizing the size of the legend may lead to a poor visibility on smaller screens.
This short article covers how you can customize the size of the legend in Plotly using the update_layout() function and the legend parameter.