Plotly (Dash) tick label overwriting

Question

I cannot get the following to plot the ticklabels

self.months = [2017-01-01', 2017-02-01', ...]



def plot_bar(self):
        print self.data
        app.layout = html.Div(children=[html.H1(children=''), html.Div(children='Discovered monthly'),
        dcc.Graph(
            figure=go.Figure(
            data = self.data,
            layout=go.Layout(
                title='Streams', showlegend=True, barmode='stack', margin=go.Margin(l=200, r=0, t=40, b=20),
                xaxis=dict(tickvals = self.months, ticktext = self.months, title='months')
                )
            ),
        style={'height': 300},
        id='my-graph')
        ])

So basically I have a numerical representation of the a bar chart, however when I change the tick values and ticklabels, those numerical labels dissappear, however I do not see the dates that I would be expected to be there. Am I missing a switch to display these labels?

Answer 1

The tickvals need to be the actual values of the x-axis where your ticks shall be positioned, not the labels. Not knowing what your actual data looks like, here is an adjusted example with some made-up data:

self.months = ['2017-01-01', '2017-02-01', '2017-03-01']
self.data = [
    {'x': [0, 1, 2], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
    {'x': [0, 1, 2], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
]

# X-Axis location for the ticks
self.tickvals = [0, 1, 2]

def plot_bar(self):
    app.layout = html.Div(children=[html.H1(children=''), html.Div(children='Discovered monthly'),
                                    dcc.Graph(
                                        figure=go.Figure(
                                            data = self.data,
                                            layout=go.Layout(
                                                title='Streams', showlegend=True, barmode='stack', margin=go.Margin(l=200, r=0, t=40, b=20),
                                                xaxis=dict(tickvals = self.tickvals, ticktext = self.months, title='months')
                                            )
                                        ),
                                        style={'height': 300},
                                        id='my-graph')
                                    ])

Note how this maps 2017-01-01 to the corresponding value 0, 2017-02-01 to 1 and 2017-03-01 to 2 on the x-axis. I could have left out 2017-02-01 (and thus 1 in self.tickvals) in case that would produce too many labels or chosen arbitrary values here such as 1.5 to plot my labels. As we are talking about bar graphs, the latter example lacks a useful application.