✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Unwanted extra lines in bar chart and weird totals on Hover

Hello,
I am new to Dash (and Python) and spent some time experimenting with Dash. I created a barchart and used pandas to read in a csv.

Csv from example:
Year;Sex;Main;Department;Team;Numbers;FTE
2014;male;Scotland;Communication;Advice;4;3.30
2014;male;Scotland;Communication;Advice management.;1;0.80
2014;male;Scotland;Communication;Advice agency;4;3.41
2014;female;Scotland;Communication;Advice;5;4.15
2014;female;Scotland;Communication;Advice management.;3;2.40
2014;female;Scotland;Communication;Advice agency;14;10.70

First question:
A few observations: Hovers show not the total, but only the value of the last record of the ‘group’
14 for female, 4 for man.
How can I make it show the total value?
9 for ‘Man’ and ‘22’ for female?

Second question:
If you look closely at the barchart, you see extra lines in it, it looks like the bar is separated in 3 pieces. 3 little blocks --> 3 records in csv.
How do I get rid of this lines, so it looks like a solid block, it now seems a stacked bar?

Thanks for the help.

Image:

Code:

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

#Load data
df = pd.read_csv(’./data/MaleFemale2.csv’, sep=’;’)

app = dash.Dash()

#Filter
isMale=df[‘Sex’]==‘male’
isFemale=df[‘Sex’]==‘female’

app.layout = html.Div([

dcc.Graph(
    id='MaleFemaleGraph',
    figure={
        'data': [
            {
                'y': df[isMale].Numbers,
                'x': df[isMale].Year,
                'text': df[isMale].Year,
                'customdata': df[isMale].Year,
                'name': 'Male',
                'type': 'bar',
                #'orientation': 'h'
            },
            {
                'y': df[isFemale].Numbers,
                'x': df[isFemale].Year,
                'text': df[isFemale].Year,
                'customdata': df[isFemale].Year,
                'name': 'Female',
                'type': 'bar',
                #'orientation': 'h'
            }
			
        ],
        'layout': {'display': 'inline-block'
                , 'verticalAlign':'left'
                , 'width': '50%'
                }
    }
)

])

if name == ‘main’:
app.run_server(debug=True)

1 Like

My guess is that your layout has CSS styles - these need to be applied to the dcc.Graph in the style property, instead of in your layout. If that doesn’t change anything it could be a bug. :bug:

Thanks for your reply. I will try experimenting with ’ style’ in dcc.graph. Maybe that also fixes the totals when hovering over the graph. I will post if I get some results.

Tried several things:
marker settings line width (which makes it even more visible), height etc…
Different browser/OS.
Added:
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)

But the result stays the same. Still incorrect totals en unwanted separators in the bar chart.
Nobody else experiences this?

yes i experience this - did you manage to remove it? i am struggling

Could you create a simple, reproducible example and let us know which package versions you are using? Here are some tips on how to create a simple example: How to Get your Questions Answered on the Plotly Forum