Good morning, I am having difficulty applying a zoom to the graph below. I need to improve the visualization of the bars and add a horizontal scroll bar to facilitate viewing. If there is a method to apply it without using CSS, it would be great, as I am having trouble applying it here.
Thank All!
config_graph={"displayModeBar": False, "showTips": False, 'scrollZoom': False, "showTips": True}
# Criando o gráfico de barras
bar_chart_figure10 = px.bar(
filtro_cobertura_doses_municipio,
x='Município',
y='Porcentagem (%)',
color='Doses',
text='Porcentagem (%)', # Adiciona os rótulos de texto com os valores da coluna 'Porcentagem'
width=1850,
height=350,
title=f'COBERTURA DE DOSES POR MUNICIPIO (%) {select_municipio if select_municipio else "TODOS OS MUNICÍPIOS"}',
barmode='group',
labels={'Região Saúde', 'Porcentagem (%)'},
color_discrete_map=color_map # Aplica o mapeamento de cores
)
bar_chart_figure10.update_layout(
plot_bgcolor='rgba(0,0,0,0)',
title={
'text': f'<b>COBERTURA DE DOSES POR MUNICIPIO (%) {select_municipio if select_municipio else "TODOS OS MUNICÍPIOS"}</b>',
'font': {'size': 17, 'family': 'Arial'}
},
legend=dict(
orientation="v",
yanchor="top",
y=1.1,
xanchor="center",
x=-0.12
)
)
# Atualiza todas as trilhas para exibir os rótulos de texto dentro das barras
bar_chart_figure10.update_traces(
textposition='inside'
)
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardBody([
dcc.Graph(
id='bar-chart-municipio2',
className='dbc',
config=config_graph,
responsive=True
)
], style={'padding': '10px', 'overflowY': 'auto', 'height': '500px'}) # Ajuste o padding, overflowY e height conforme necessário
], style={'border': 0, 'width': '100%'})
], sm=12, md=12, lg=12),
], style={'width': '100%', 'height': '100%'}),