Dash: Axes labels/titles not appearing

[gkiar]

Hi!

First of all: I'm not sure whether or not this is a Dash or Plotly specific issue, but I'm using them together so figured I'd put the comment here - please redirect me if I'm mistaken.

The behaviour I'm currently getting is that titles specified for both axis and plots are not appearing in the resulting plots. Using older versions of plotly and dash these have produced the expected output. I've attached two figures below, showing the previous and current result. I've also attached a pip freeze of all related packages on my machine.

I'm currently specifying the title as is described quite simply in the documentation, within my layout structure using the title field and a simple string value, i.e. layout = {'title':'my title', 'yaxis': {'title':'my y title', ...}, ...}

Please let me know if there's likely a simple oversight on my part here causing this behaviour. Thanks!

| Expected (Previous) | Unexpected (Current) |
|:---------------------|:----------------------|
| | |
| plotly==3.1.1, dash==0.24.1, dash-core-components==0.27.1, dash-html-components==0.11.0, dash-renderer==0.13.0, dash-table-experiments==0.6.0| plotly==3.5.0, dash==0.35.2, dash-core-components==0.42.1, dash-html-components==0.13.5, dash-renderer==0.16.2, dash-table-experiments==0.6.0|

[alexcjohnson]

Thanks for bringing this up @gkiar!
Presumably related to https://github.com/plotly/plotly.js/pull/3276 where we changed from:
layout={title: 'my title'}
to:
layout={title: {text: 'my title'}}
The older form is still expected to work, but until we figure out what's going on here you should be able to get the desired result by changing to the new form of title attributes.

[gkiar]

Hi @alexcjohnson - thanks for the quick response!

I actually have been printing my Figure object out to debug, and it is being properly converted, i.e.
it shows up as the following: 'title': {'text': 'Usage Stats'}.

Any idea what would cause the property to not be rendered, despite it being in the figure object? I inspected the plot in the console and found the title elements to be blank:

<g class="infolayer">
  <g class="g-gtitle"></g>
  <g class="g-xtitle"></g>
  <g class="g-ytitle"></g>
  <g class="g-y2title"></g>
</g>

[alexcjohnson]

Could it be that you somehow have an old plotly.js version, despite having updated dash?
In the console, you can type Plotly.version. Also to see what's actually supplied to the plot, you can select the class="js-plotly-plot" element and type $0.layout.title. Here's what I see in a currently-working example at https://dash.plot.ly/dash-core-components:

[gkiar]

@alexcjohnson I think you found the issue - the layout object is correctly set, but my plotly version is 1.39.1. Is there a guide somewhere on how to ensure that the javascript library also get updated when I update the Python component? Thanks!

[gkiar]

Ah, I was using a "custom" dash.Dash class in my code, as I believe at one point this was the recommended way to specify page title and some other information. It now appears I can do this a better way, so I've reverted back to using the default dash.Dash, and all is working as expected :) Thanks!