Modebar aesthetic configurability

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?)

@jackparmer

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?

    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.

@alexcjohnson

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 :)

@antoinerg

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

@chriddyp

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

+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> .

@nicolaskruchten

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.

@nicolaskruchten

Thank you for your input @nicolaskruchten!

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 :)

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.

@nicolaskruchten

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.

@antoinerg

@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 :)

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

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

I'd call that a breaking change.

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.

@zoohair

@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

@antoinerg

@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?

@zoohair

@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)'
                }
            }
        }
    )

@antoinerg

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 😞

@antoinerg

@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.

@nicolaskruchten

@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?

@antoinerg

@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.

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.

@tcados

@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!

How can I put watermark in plotly graph?

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

Navigation Menu

Repository navigation

Modebar aesthetic configurability #3063

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Modebar aesthetic configurability #3063

Description

Activity

antoinerg commented on Oct 2, 2018

alexcjohnson commented on Oct 2, 2018

antoinerg commented on Oct 2, 2018

jackparmer commented on Oct 2, 2018

nicolaskruchten commented on Oct 3, 2018

jackparmer commented on Oct 3, 2018

alexcjohnson commented on Oct 3, 2018

antoinerg commented on Oct 3, 2018

nicolaskruchten commented on Oct 3, 2018

alexcjohnson commented on Oct 4, 2018

antoinerg commented on Oct 4, 2018

nicolaskruchten commented on Oct 5, 2018

antoinerg commented on Oct 5, 2018

4 remaining items

etpinard commented on Oct 5, 2018

zouhairm commented on Feb 16, 2019

antoinerg commented on Feb 17, 2019

zouhairm commented on Mar 6, 2019

antoinerg commented on Mar 6, 2019

zouhairm commented on Mar 7, 2019

nicolaskruchten commented on Mar 7, 2019

antoinerg commented on Mar 7, 2019

zouhairm commented on Mar 8, 2019

tcados commented on Mar 26, 2019

etpinard commented on Mar 26, 2019

kroim commented on Feb 19, 2020

kroim commented on Feb 19, 2020

luggie commented on Feb 12, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions