Black Lives Matter. Please consider donating to Black Girls Code today.
https://www.blackgirlscode.com

How to remove the white border from bar marker?

I struggle to remove the border around a simple bar chart. What to set in fig.update_layout(?) to remove the white tiny border around each of the markers. It is very clear against dark background or when bars overlap.

image

full example, same bad white border

import plotly.graph_objects as go

years = [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
         2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012]

fig = go.Figure()
fig.add_trace(go.Bar(x=years,
                y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
                   350, 430, 474, 526, 488, 537, 500, 439],
                name='Rest of world',
                marker_color='rgb(55, 83, 109)'
                ))
years_ = list(years)
years_[1] = 2011
fig.add_trace(go.Bar(x=years_,
                y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
                   299, 340, 403, 549, 499],
                name='China',
                marker_color='rgb(26, 118, 255)'
                ))

fig.update_layout(
    title='US Export of Plastic Scrap',
    xaxis_tickfont_size=14,
    xaxis_showgrid=False,
    yaxis_showgrid=False,
    xaxis_zeroline=False, 
    yaxis_zeroline=False,
    xaxis=dict(
            linecolor='green',
    ),
    yaxis=dict(
        title='USD (millions)',
        titlefont_size=16,
        tickfont_size=14,
    ), 
    legend=dict(
        x=0,
        y=1.0,
        bgcolor='rgba(255, 255, 255, 0)',
        bordercolor='rgba(255, 255, 255, 0)'
    ),
    barmode='group',
    bargap=0.15, # gap between bars of adjacent location coordinates.
    bargroupgap=0.1, # gap between bars of the same location coordinate.
    paper_bgcolor='rgb(17,17,17)',
    plot_bgcolor='rgb(17,17,17)',
)
fig.show()

image

  • bordercolor
    Parent: data[type=bar].marker.colorbar
    Type: color
    Default: "#444" Sets the axis line color.
  • borderwidth
    Parent: data[type=bar].marker.colorbar
    Type: number greater than or equal to 0
    Default: 0 Sets the width (in px) or the border enclosing this color bar.

In this case the borders come from the marker.line attribute so setting marker.line.width to 0 will remove them

1 Like

amazing thank you
image