How to specify a bar chart with labels in Dash dcc.graph?

Dash Python
1

Hello,

I’m on day 0 still on Dash and Plotly, but I’m deffinitely getting the hang of things. I can’t though for the life of me figure out how to create data labels in my bar chart.

The “Bar Chart with Direct Labels” that can be found on this page: https://plot.ly/python/bar-charts/ is what I’m going for. For some reason though, it isn’t working when I try to program it into my bar chart. Is this a configuration that has not been added to Dash yet?

Thanks for taking the time to answer my question,
Maxim

3

Its possible look at Dash Tutorial - Part 1: App Layout. Just look at more about visualization section and am sure you will figure it out.

4

I already read through that and even re read it again just to make sure. I still don’t see where I can specify this setting to see data labels and it wasn’t clear after looking at plotly’s documentation either.

Can you share a solution perhaps?

5

@mbkupfer As you mentioned, bar chart with direct labels is what you’re going for:

Absolutely any chart that works with plotly’s Python library will work in Dash. I’d suggest debugging why the chart isn’t working in Jupyter notebook or nteract first, then bringing the code back to Dash once you’ve figured it out. If you can post a plot.ly link to your not-working chart, it will be easier for folks here to debug what the issue is. Almost impossible though without looking at a link to the chart or your Python code.

1 Like
6

you can specify that in the layout see the image attached
dasss

7

@Dee which line is the specification for the labels?

8

Underlayout, title is for the name of the table, then it=you will use dict for the xaxis and yaxis, as you observed I put the tittle of the axis as title in that dict, you can add everything for that axis in the dict and the same goes for the yaxis

9

Can you share a snipet of what you are doing then we can start from there

10

Yeah sure. Below is a copy of my code. If you want want working demo let me know and I can whip something together that is simple, but it’d be nice if the snippet below would be satisfactory for these purposes. I also attached a screenshot of what the graph looks like right now.

dcc.Graph(
    id='pay_rate_data',
    figure={
        'data': [
            {'x': ['mean', '25th', 'median'], 'y': [occupation_details['payRate_mean'], occupation_details['payRate_25th'], occupation_details['payRate_median']], 'type': 'bar', 'name': 'Pay Rate'},
         
        ],
        'layout': {
            'title': 'Pay Rate for {}'.format(occupation_details['title']),
			
        }
    }

image

11

@Dee I followed the instructions in this example I grabbed from plotly’s documentation (see below) and it worked when I gave a raw value for text, but when I made it text = y, I would get an error stating that NameError: name 'y' is not defined. Any idea of what’s going on here?

import plotly.plotly as py
import plotly.graph_objs as go

x = [‘Product A’, ‘Product B’, ‘Product C’]
y = [20, 14, 23]

data = [go.Bar(
x=x,
y=y,
text=y,
textposition = ‘auto’,
marker=dict(
color=‘rgb(158,202,225)’,
line=dict(
color=‘rgb(8,48,107)’,
width=1.5),
),
opacity=0.6
)]

py.iplot(data, filename=‘bar-direct-labels’)

12

https://plot.ly/~jackp/17555/#code

1 Like
13

@Dee thanks that helps a ton.