Chartjs – legends take up too much space on mobile devices

Good day everybody,

I have a graph with four legends, all of which are longer. How can I display the graph below large enough and still display the legends above?

if i hide the legends, the graph looks good, of course.

Answer

You will have to make use of an html legend, see this example in the chart.js documentation on how to implement it: https://www.chartjs.org/docs/master/samples/legend/html.html