Modebar aesthetic configurability #3063

jackparmer · 2018-10-01T18:02:00Z

Would like the modebar to have a few more programmatic options, especially for extremely styled Dash apps:

Programmatic ability to set the modebar in a vertical orientation. Bokeh does a nice job with this:
Programmatic ability to set the background bar color, background bar opacity, and icon colors:
While we're at it, update the plotly logo in the modebar

Related:
#2171
https://github.com/plotly/streambed/issues/9699
(Perhaps we should create a plotly/plotly.js "modebar" label?)

antoinerg · 2018-10-02T02:12:31Z

Good idea @jackparmer

I suggest we add the following config key:

    // mode bar style
    modeBarStyle: {
        orientation: 'h',
        backgroundColor: 'rgba(255 ,255 ,255 ,0.7)',
        iconColor: 'rgba(0, 31, 95, 0.3);'
    },

We should probably turn the icons into a font: it'll then be straightforward to change their color and opacity with CSS.

@etpinard, @alexcjohnson What do you think?

alexcjohnson · 2018-10-02T02:34:14Z

    modeBarStyle: {
        orientation: 'h',
        backgroundColor: 'rgba(255 ,255 ,255 ,0.7)',
        iconColor: 'rgba(0, 31, 95, 0.3);'
    },

I like it. I'd probably go for bgcolor just to match our usage in the regular schema. And there are two colors to consider: the logo and all other icons. So logoColor and iconColor? Also perhaps position: (top|middle|bottom) (left|center|right) like textposition, though that can be omitted for at least the first round, and added in later if someone is interested in it.

We should probably turn the icons into a font: it'll then be straightforward to change their color and opacity with CSS.

They were a font a long time ago... and in fact that's still how they're given to us when someone designs a new one. but we ditched that and instead just draw them as straight SVG (with a script to pull that out into js) so we have everything encapsulated in the one js bundle. Anyway this is still styled by css, we'll just need to make some pieces of that dynamic.

antoinerg · 2018-10-02T03:03:43Z

Thanks @alexcjohnson ! So I will go with the following for now:

  modeBarStyle: {
        orientation: 'h',
        bgcolor: 'rgba(255 ,255 ,255 ,0.7)',
        iconColor: 'rgba(0, 31, 95, 0.3)',
        logoColor: 'rgba(0, 31, 95, 0.3)',
        position: 'right'
    },

Let's keep the pipeline for icons the same for now. I guess I just need to crush the logo into a single path. A tool like this may do the job: https://www.enigmeta.com/svgcrush/ . Can you point me to the most up-to-date plot.ly logo in SVG?

Thank you again for the all the details :)

jackparmer · 2018-10-02T03:07:28Z

@antoinerg This one
https://raw.githubusercontent.com/plotly/design-assets/master/logos/plotly/images/plotly-logomark.svg?token=ABx4ao8iUW7_hNZPRwWUjwgmzVgjGRKgks5bvBthwA%3D%3D

nicolaskruchten · 2018-10-03T16:55:48Z

Just wanting to chime in here a bit and request that these be layout options and not config options if at all possible... :)

My rationale is that users will often want to control these settings alongside other layout options like the plot background colour and will likely want to drag along these settings in templates etc. If we make these options config-only then people will not be able to e.g. use the editor to style the modebar, and will not be able to make "dark theme" templates that can be reused within Chart Studio. Baking these in to layout will also likely make things easier for DDK...

/cc @chriddyp @wbrgss

jackparmer · 2018-10-03T16:57:41Z

+1 layout

…

On Wed, Oct 3, 2018 at 12:55 PM Nicolas Kruchten ***@***.***> wrote: Just wanting to chime in here a bit and request that these be layout options and not config options if at all possible... :) My rationale is that users will often want to control these settings alongside other layout options like the plot background colour and will likely want to drag along these settings in templates etc. If we make these options config-only then people will not be able to e.g. use the editor to style the modebar, and will not be able to make "dark theme" templates that can be reused within Chart Studio. Baking these in to layout will also likely make things easier for DDK... /cc @chriddyp <https://github.com/chriddyp> @wbrgss <https://github.com/wbrgss> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3063 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABx4aiaJAl5FmC9DLRiiboZ4vR5CL8ODks5uhOwbgaJpZM4XClrg> .

alexcjohnson · 2018-10-03T17:03:39Z

Thanks @nicolaskruchten, layout makes sense. I think we originally put these in config as that's where all the other modebar options go, but those are all about altering the functionality of the modebar, which may need to call out to other code on the page or something... whereas the new items are all about appearance and that's not something that depends on the display context so layout is better.

antoinerg · 2018-10-03T17:09:00Z

Thank you for your input @nicolaskruchten!

nicolaskruchten · 2018-10-03T17:13:26Z

Nice, thanks for the flexibility, sorry to give this feedback so late :)

Next ask: any way to make some of the behaviour automatic? especially with respect to the figure background? would be great to have the modebar either transparent or match the plot background by default, and to have the icon colours somehow maintain contrast... Even if that's hidden behind a flag I think it would be a nice option that would be turned on by default in the editor :)

alexcjohnson · 2018-10-04T12:24:04Z

Next ask: any way to make some of the behaviour automatic?

I think that would be fine, and I wouldn't consider that a breaking change as long as our solution is legible on any plot.

Ideal would be to have modebar.bgcolor match paper_bgcolor but add partial opacity, in case some component or subplot sneaks underneath the modebar. Then we just need to choose a default iconcolor (and active color) that is legible and looks good with the resulting (or explicit) bgcolor.

antoinerg · 2018-10-04T16:01:19Z

I decided to wait before implementing the automatic behavior described above by @nicolaskruchten and @alexcjohnson. I definitely love the idea though. It could be applied to every bit of text on a figure: title, axes and so on. For example, as of right now, choosing "paper_bgcolor": "#444" makes all the text invisible! This sounds like a new feature to me and probably deserves its own issue.

nicolaskruchten · 2018-10-05T02:00:40Z

@antoinerg I'd really like this default behaviour for the modebar background at least... Just because we can't do it everywhere doesn't mean we shouldn't do it in some places: we already do handle automatic contrasting text in places like hovertext, where the foreground color is automatically set based on the background :)

antoinerg · 2018-10-05T02:11:05Z

Sure thing! I didn't know we already had the logic to do that in the codebase :)

etpinard · 2018-10-05T14:27:19Z

Sure thing! I didn't know we already had the logic to do that in the codebase :)

It's here:

plotly.js/src/components/color/index.js

Lines 64 to 82 in 97cb217

    
           /* 
        
            * Create a color that contrasts with cstr. 
        
            * 
        
            * If cstr is a dark color, we lighten it; if it's light, we darken. 
        
            * 
        
            * If lightAmount / darkAmount are used, we adjust by these percentages, 
        
            * otherwise we go all the way to white or black. 
        
            */ 
        
           color.contrast = function(cstr, lightAmount, darkAmount) { 
        
               var tc = tinycolor(cstr); 
        
               if(tc.getAlpha() !== 1) tc = tinycolor(color.combine(cstr, background)); 
        
               var newColor = tc.isDark() ? 
        
                   (lightAmount ? tc.lighten(lightAmount) : background) : 
        
                   (darkAmount ? tc.darken(darkAmount) : defaultLine); 
        
               return newColor.toString(); 
        
           };

and see example for hover label text:

plotly.js/src/components/fx/hover.js

Lines 795 to 811 in 97cb217

    
           var commonBgColor = commonLabelOpts.bgcolor || Color.defaultLine; 
        
           var commonStroke = commonLabelOpts.bordercolor || Color.contrast(commonBgColor); 
        
           var contrastColor = Color.contrast(commonBgColor); 
        
           lpath.style({ 
        
               fill: commonBgColor, 
        
               stroke: commonStroke 
        
           }); 
        
           ltext.text(t0) 
        
               .call(Drawing.font, 
        
                   commonLabelOpts.font.family || fontFamily, 
        
                   commonLabelOpts.font.size || fontSize, 
        
                   commonLabelOpts.font.color || contrastColor 
        
                ) 
        
               .call(svgTextUtils.positionText, 0, 0) 
        
               .call(svgTextUtils.convertToTspans, gd);

antoinerg · 2018-10-05T16:07:43Z

Thanks @etpinard ! @nicolaskruchten's request was super easy to implement with this 😊

Sorry @nicolaskruchten for not realizing how easy this was to do! I'm still learning 😄

nicolaskruchten · 2018-10-05T16:10:48Z

There's never any need to apologize for learning :) Happy that it turned out to be easy!

antoinerg · 2018-10-05T16:20:10Z

For example, as of right now, choosing "paper_bgcolor": "#444" makes all the text invisible!

@nicolaskruchten Do you think we should now do the same for the title, axes and so on ie. provide a better font color by default ?

etpinard · 2018-10-05T16:22:23Z

Do you think we should now do the same for the title, axes and so on ie

I'd call that a breaking change.

zouhairm · 2019-02-16T01:56:01Z

Should I expect this to work with Dash ? I've tried passing it in the plotly config but doesn't seem to have an effect.

antoinerg · 2019-02-17T18:53:47Z

@zoohair It should work with Dash if you are using plotly.js version v.1.42.0 or newer!

For reference: https://github.com/plotly/plotly.js/releases/tag/v1.42.0

zouhairm · 2019-03-06T16:55:25Z

@antoinerg : I'm on Dash 0.39 which seems to be using plotly-1.45.0.min.js

But still no effect when passing modeBarStyle parameters (e.g. 'modeBarStyle':{'bgcolor': 'red', 'color':'rgba(0,0,0,1)'}) as part of the config to a dcc.Graph element in my layout.

Is there a codepen / minimum example somewhere that illustrates the proper use of modeBarStyle in conjunction with Dash?

antoinerg · 2019-03-06T17:53:17Z

@zoohair The style of the modebar is controlled by attribute layout.modebar. The following example has been tested to work properly

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization',
                'modebar': {
                    'orientation': 'v',
                    'bgcolor': 'rgba(0,0,0,0.5)'
                }
            }
        }
    )

zouhairm · 2019-03-07T12:44:17Z

Thanks @antoinerg : it is a bit confusing since this github issue mentions modeBarStyle, and other modebar configuration (visible icons, hover) is done through the dcc.Graph(config=...) not the layout.

I'm struggling though to find which setting makes it possible for the modebar to be transparent (both my paper_bgcolor and plot_bgcolor are set to rgba(0,0,0,0)). There is a gray background color (that I can't change despite setting modebar's bgcolor, color, or activecolor).

This issue only appeared in more recent Dash updates (likely due to an update to plotly.js - it worked on 1.42.2 but not working on 1.45.0). I remember seeing this reported as an issue in github somewhere but for the life of me I can't find it again 😞

nicolaskruchten · 2019-03-07T14:25:55Z

@antoinerg have we checked in the latest version of Dash that it's possible to set the modebar background to 100% transparent? I've been seeing a lot of semi-transparent modebar backgrounds in various Dash apps recently.

antoinerg · 2019-03-07T15:00:00Z

@nicolaskruchten I confirm that it is possible to set the modebar background to 100% transparent by setting layout.modebar.bgcolor to rgba(0, 0, 0, 0).

@zoohair the fourth number in a rgba color is the opacity so setting it to 0 should make the modebar transparent. Can you send me the list of layout attributes you're using so I can assist you further?

zouhairm · 2019-03-08T09:43:46Z

@antoinerg : my apologies ; As I tried to put together a minimum working example I traced down the issue to a css that was included that was overriding the bgcolor using .js-plotly-plot .plotly .modebar { background-color: #f2f2f2 }

It's odd because I've had that there for a while, but things worked as expected (i.e. the background-color did not appear until the mdoebar was hovered on) but not in the new version of plotly.js.

tcados · 2019-03-26T06:43:50Z

I'm still confused similarly to zoohair....
I am able to make the background transparent, but how and where do I change the color of the icons? and how about when I hover over the icons?

Thanks.

etpinard · 2019-03-26T14:08:30Z

@tcados commenting on closed issues isn't the best way to ask for help for this project.

Please use https://community.plot.ly/c/plotly-js - that way other plotly.js users will be able to help out or be helped from your questions.

Thank you!

kroim · 2020-02-19T02:27:32Z

How can I put watermark in plotly graph?

kroim · 2020-02-19T02:28:25Z

luggie · 2021-02-12T15:32:54Z

Any new thoughts on? :
'layout': {'modebar': { 'position': 'center' }

jackparmer assigned antoinerg Oct 1, 2018

etpinard added the feature something new label Oct 1, 2018

antoinerg mentioned this issue Oct 2, 2018

modeBar styling #3068

Merged

antoinerg closed this as completed in #3068 Oct 5, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modebar aesthetic configurability #3063

Modebar aesthetic configurability #3063

jackparmer commented Oct 1, 2018 •

edited

Loading

antoinerg commented Oct 2, 2018

alexcjohnson commented Oct 2, 2018

antoinerg commented Oct 2, 2018 •

edited

Loading

jackparmer commented Oct 2, 2018

nicolaskruchten commented Oct 3, 2018

jackparmer commented Oct 3, 2018 via email

alexcjohnson commented Oct 3, 2018

antoinerg commented Oct 3, 2018

nicolaskruchten commented Oct 3, 2018

alexcjohnson commented Oct 4, 2018

antoinerg commented Oct 4, 2018

nicolaskruchten commented Oct 5, 2018

antoinerg commented Oct 5, 2018

etpinard commented Oct 5, 2018

antoinerg commented Oct 5, 2018

nicolaskruchten commented Oct 5, 2018

antoinerg commented Oct 5, 2018 •

edited

Loading

etpinard commented Oct 5, 2018

zouhairm commented Feb 16, 2019

antoinerg commented Feb 17, 2019 •

edited

Loading

zouhairm commented Mar 6, 2019

antoinerg commented Mar 6, 2019 •

edited

Loading

zouhairm commented Mar 7, 2019

nicolaskruchten commented Mar 7, 2019

antoinerg commented Mar 7, 2019

zouhairm commented Mar 8, 2019

tcados commented Mar 26, 2019

etpinard commented Mar 26, 2019 •

edited

Loading

kroim commented Feb 19, 2020

kroim commented Feb 19, 2020

luggie commented Feb 12, 2021 •

edited

Loading

Modebar aesthetic configurability #3063

Modebar aesthetic configurability #3063

Comments

jackparmer commented Oct 1, 2018 • edited Loading

antoinerg commented Oct 2, 2018

alexcjohnson commented Oct 2, 2018

antoinerg commented Oct 2, 2018 • edited Loading

jackparmer commented Oct 2, 2018

nicolaskruchten commented Oct 3, 2018

jackparmer commented Oct 3, 2018 via email

alexcjohnson commented Oct 3, 2018

antoinerg commented Oct 3, 2018

nicolaskruchten commented Oct 3, 2018

alexcjohnson commented Oct 4, 2018

antoinerg commented Oct 4, 2018

nicolaskruchten commented Oct 5, 2018

antoinerg commented Oct 5, 2018

etpinard commented Oct 5, 2018

antoinerg commented Oct 5, 2018

nicolaskruchten commented Oct 5, 2018

antoinerg commented Oct 5, 2018 • edited Loading

etpinard commented Oct 5, 2018

zouhairm commented Feb 16, 2019

antoinerg commented Feb 17, 2019 • edited Loading

zouhairm commented Mar 6, 2019

antoinerg commented Mar 6, 2019 • edited Loading

zouhairm commented Mar 7, 2019

nicolaskruchten commented Mar 7, 2019

antoinerg commented Mar 7, 2019

zouhairm commented Mar 8, 2019

tcados commented Mar 26, 2019

etpinard commented Mar 26, 2019 • edited Loading

kroim commented Feb 19, 2020

kroim commented Feb 19, 2020

luggie commented Feb 12, 2021 • edited Loading

jackparmer commented Oct 1, 2018 •

edited

Loading

antoinerg commented Oct 2, 2018 •

edited

Loading

antoinerg commented Oct 5, 2018 •

edited

Loading

antoinerg commented Feb 17, 2019 •

edited

Loading

antoinerg commented Mar 6, 2019 •

edited

Loading

etpinard commented Mar 26, 2019 •

edited

Loading

luggie commented Feb 12, 2021 •

edited

Loading