Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Responsive legend at the bottom of a chart, is it possible?

I have my layout attribute as the following:
layout: { showlegend: true, legend: { xanchor: 'center', x: 0.5, orientation: 'h' } }

This make the legend shown horizontally and at the bottom of the chart. However, when I have more than ~7 legends, the legends get truncated instead of shown in the next line. Is there a way to make the legend responsive (showing the leftover legends in the next line)?


Not at the moment unfortunately.

You can pushing the margin to the left-hand side by setting layout.legend.x: 0 or increasing the right-hand margin with e.g layout.margin.r: 120.

1 Like