plotly.js
plotly.js copied to clipboard
Support simple subtitle parameter (like title)
Image from Figma mock by @TonyBurbs :
Here is a link to figma for the lowest touch effort: https://www.figma.com/design/tp9E4awumSOuCG1ZNev09z/Plotly.js-Design-System?node-id=21676%3A325474&t=aE2dNlExZS4pbsNs-1 It's adding in the subtitle and citation without any other major design changes
API for subtitle
- Same API as
title - Add a
subtitleproperty directly underlayoutwith the same properties astitle
Structure:
layoutsubtitletext: strfont: standard font options
@archmoj API-wise this seems pretty straightforward -- do you have any thoughts or suggestions?
I think it should go inside layout.title object instead of layout.
It reminds of when we added minor ticks in #6166.
That would also allow adding multiple titles and subtitles later on.
Also it would be nice (and possibly easy) to have the subtitle option available on the cartesian axes and other places too.
For a quick prototype, perhaps you could add the subtitle text to the end of title.text with a <br> and style it differently.
I think it should go inside
layout.titleobject instead oflayout. It reminds of when we addedminorticks in #6166.That would also allow adding multiple titles and subtitles later on.
I think that’s right. Also makes it clear that it inherits positioning from the title (presumably with optional overrides to at least the spacing relative to the main title) and it can inherit the main title font (but smaller, and remove bold if you bolder the main font?)
@archmoj @alexcjohnson Makes sense -- do you mean something like the below?
layouttitlesubtitletextfont
@archmoj @alexcjohnson Makes sense -- do you mean something like the below?
-
layout
title
subtitle
textfont
Yes. Let's start with just that. Perhaps we rename subtitle to sub later.
As suggested by @archmoj : A simple working prototype which uses HTML tags to simulate a subtitle:
https://codepen.io/emilykl-code/pen/MWdKYmr
One may wants to add an attribute e.g. spacing (in pixel?) to help increase the space between the title and subtitle.
But I am not sure where it should go in the API i.e. title.spacing or title.subtitle.spacing?