Dash-dcc.Graph: labels for each databar

user_14601962 0
Viewed 293

I have the code below trying to put labels of values (MC_2019, MC_2020,..TC_2019, TC_2020..) for each data bar above it. How can I do that please?

dbc.Col([ 
                    html.H5('Medium vs Top corporate', className='text-center'),
                        dcc.Graph(
                            id = 'histogram',
                            figure={
                               'data' : [
                                   {'x' : ["2019","2020","2021"], 'y' : [MC_2019, MC_2020, MC_2021], 'type': 'bar', 'name':'Medium corporate','marker' : { "color" : '#adbfd1'}},
                                   {'x' : ["2019", "2020", "2021"], 'y' : [TC_2019, TC_2020, TC_2021], 'type': 'bar', 'name':'Top corporate','marker' : { "color" : '#c0c0c0'}}
                               ], 
                            
                                'layout': {
                                    'plot_bgcolor': '#ffffff', # 
                                    'paper_bgcolor': '#ffffff', # background color
                                    'font':{
                                        'color': '#2D3E51' # color (blue) of font
                                    },
                                    'title': 'Poměr MC vs TC za všechny roky'
                                }
                            },style={'height':420}),
plotly-python plotly-dash plotly python
1 Answers

It's difficult to know for sure what you're looking for here without some sample data and fully reproducible example. But using your setup, adding:

'type': 'bar', 'name':'Top corporate',
'textposition':'outside',

... for your first trace, and the corresponding values for your second trace will give you the following plot with some sample data:

enter image description here

Complete code for full reproducility using JupyterDash

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
# from dash import Input, Output, State, dcc, html
from dash.dependencies import Input, Output, State, ClientsideFunction
import dash_html_components as html
from jupyter_dash import JupyterDash
import plotly.express as px

# Sample data
MC_2019 = 11
MC_2020 = 12
MC_2021 = 14

TC_2019 = 21
TC_2020 = 22
TC_2021 = 24

app = JupyterDash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([dbc.Col([ 
                    html.H5('Medium vs Top corporate', className='text-center'),
                        dcc.Graph(
                            id = 'histogram',
                            figure={
                               'data' : [
                                   {'x' : ["2019","2020","2021"], 'y' : [MC_2019, MC_2020, MC_2021],
                                    'type': 'bar', 'name':'Medium corporate',
                                    'text': [MC_2019, MC_2020, MC_2021],
                                    'textposition':'outside',
                                    'marker' : { "color" : '#adbfd1'}},
                                   {'x' : ["2019", "2020", "2021"], 'y' : [TC_2019, TC_2020, TC_2021],
                                    'type': 'bar', 'name':'Top corporate',
                                    'text': [TC_2019, TC_2020, TC_2021],
                                    'textposition':'outside',
                                    'marker' : { "color" : '#c0c0c0'}}
                               ], 
                            
                                'layout': {
                                    'plot_bgcolor': '#ffffff', # 
                                    'paper_bgcolor': '#ffffff', # background color
                                    'font':{
                                        'color': '#2D3E51' # color (blue) of font
                                    },
                                    'title': 'Poměr MC vs TC za všechny roky'
                                }
                            },style={'height':420})])])


app.run_server(mode='inline', port=8002)
user_34377870
Related