question-mark
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.

Add a single setting to scale all font sizes

See original GitHub issue

This was originally proposed for vegalite and altair in https://github.com/vega/vega-lite/issues/1714 and https://github.com/vega/vega-lite/issues/6988 and reccomended by @domoritz to open an issue here instead.

Currently, it is cumbersome to scale ip all font sizes since it involves setting many different parameters individually, for example:

spec.width = 800;
spec.height = 500;
spec.config.axisY.titleFontSize = 14;
spec.config.axisX.titleFontSize = 14;
spec.config.axisY.labelFontSize = 16;
spec.config.axisX.labelFontSize = 16;
spec.title.fontSize = 20;
spec.encoding.color.legend.titleFontSize = 15;
spec.encoding.color.legend.labelFontSize = 15;
# facet headers fontsize also needs to be set individually now

Providing a shortcut for scaling all these parameters would be highly convenient from a usability perspective, particularly as a setting that applies to all plots (similar to setting a default theme), but also (less importantly) for individual plots. For what it’s worth, this setting is available in other high level plotting libraries such as seaborn (sns.set_theme(font_scale=1.5)) and ggplot (theme_set(theme_grey(base_size = 18))).

I believe this feature is especially important since the the default font sizes in Vega are quite small. If possible, it would also be great to also consider an increase of the default fontsizes to ~1.2 times the current size, but I understand if this default is no longer amendable to change from suggestions.

I believe all the defaults are listed here for future reference https://github.com/vega/vega/blob/main/packages/vega-parser/src/config.js#L82-L129=

Please:

  • Check for duplicate issues. Please file separate requests as separate issues on GitHub.
  • Clearly describe the goal of the feature request. Why is it needed?
  • Describe an envisioned solution. What do you want the new behavior to be?
  • If applicable, share mockup images or links to examples illustrating the desired output.
  • If applicable, share JSON spec designs for how the behavior would be made available in Vega.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:2
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
kanitwcommented, Oct 25, 2020

FYI, for

spec.config.axisY.titleFontSize = 14;
spec.config.axisX.titleFontSize = 14;
spec.config.axisY.labelFontSize = 16;
spec.config.axisX.labelFontSize = 16;

you can just do

spec.config.axis.titleFontSize = 14;
spec.config.axis.labelFontSize = 16;

So it’s a bit less tedious.

1reaction
joelostblomcommented, Nov 11, 2020

In Seaborn’s set_theme function, you can change the scaling of all plot elements (so text, axes, markers, etc) via the plotting_context param, and control the size of just the text with the font_scale param. For ggplot I am unsure if there is an option to control the size of all plot elements, but base_size can be used to scale all text as above.

Read more comments on GitHub >

github_iconTop Results From Across the Web

font-size - CSS: Cascading Style Sheets - MDN Web Docs
The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length>...
Read more >
Make text and apps bigger - Microsoft Support
Make text bigger on your screen · To go to the Accessibility settings on your computer, press the Windows logo key+U or select...
Read more >
Linearly Scale font-size with CSS clamp() Based on the Viewport
Here, we're going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport's...
Read more >
Responsive Typography 2020 (Font Size Scaling in Webflow)
... we'll cover how to setup your font sizes, images, and all content to scale seamlessly with the browser width until it reaches...
Read more >
css - Font scaling based on width of container - Stack Overflow
Now to see any variation at all one has to be assuming that the container in ... This would put the text size...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found