✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Selected bar in chart change colour

I was wondering if there was a way to get it so that my bar cart that reads from a mysql database and sends clickData to other charts changes the colour of the bar you’ve selected?

Hey @DublinProgrammer

You could try something like:

app.layout = html.Div([
   dcc.Graph(id='graph')
])

@app.callback(Output('graph', 'figure'),
             [Input('graph', 'clickData')])
def update_image(clickData):
   color = ['blue'] * 4

   fig = {
       'data': [{
           'type': 'bar',
           'x': [1,2,3,4],
           'y': [10,8,11,7],
           'marker': {
               'color': color
           }
       }],
       'layout': {
           'title': 'click a bar'
       }
   }
   if clickData is not None:
       fig['data'][0]['marker']['color'][clickData['points'][0]['pointNumber']] = 'red'
   return fig
3 Likes

Thanks for the help but I found another way of doing it using a slider in the end

1 Like