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