Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Custom font family horizontal legend overlap
See original GitHub issueVersion
5.0.2
Steps to reproduce
Add google font Roboto and set textStyle:{fontFamily: “Roboto”}. The text font can display correctly. However, the horizontal legend text has overlap. I assume it is because the legend text width is calculated by default font “sans serif” but Roboto has wider letter width.
Google Font:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
What is expected?
Legend has correct item gap
What is actually happening?
The legend text overlapped.
Issue Analytics
- State:
- Created 3 years ago
- Comments:11 (5 by maintainers)
Top Results From Across the Web
Custom legends in Matplotlib - Python Graph Gallery
This post explains how to add and customize the legend on a chart made with ... But that's not the case here since...
Read more >Legends | SpreadJS 14 - GrapeCity
Learn how to customize legend format, style, and position using SpreadJS. ... font size, and font family of the legends in the chart...
Read more >How can I change the font (family) for the labels in Chart.JS?
Change font size, color, family and weight using chart.js ... { type: 'horizontalBar', data: barChartData, options: optionsBar }).
Read more >How to Change Legend Font Size in Matplotlib?
Python3. This example changes the font size of items in the legend. The font size parameter can have integer or float values. It...
Read more >FAQ: Customising - ggplot2
Increase the horizontal space between legend keys with legend.spacing.x in theme() . This argument takes a unit object created with grid::unit() .
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I found the issue and solution. It is because of the web font loading. The chart is rendered before the font is loaded. I put it in webfont callback and the problem is solved. Here is demo of fix: https://codepen.io/rob_edgenius/pen/bGBWXpv
I think it is worth put a note somewhere in your document or FAQ.
Thank you again for your quick response.
Great job! Thank you for sharing the solution!