Como fazer gráficos em Python com Plotly e Dash

Gráficos em Python são fundamentais para apresentar dados de forma visual, seja em relatórios, dashboards ou interfaces interativas. Neste guia prático, você aprenderá como criar gráficos com a biblioteca Plotly e incorporá-los em um dashboard usando Dash.

Vamos começar do zero e construir juntos um projeto visual e responsivo!

1. Construa a estrutura básica de um dashboard em Python

Antes de incluir gráficos em dashboards, precisamos criá-los separadamente. Para isso, utilizaremos a biblioteca Plotly, uma das mais recomendadas para visualizações interativas de dados em Python.

Instale os pacotes necessários

Caso ainda não tenha feito, instale os pacotes que serão utilizados ao longo do projeto. Recomendamos trabalhar em um ambiente virtual com Python 3.10 ou superior para garantir a compatibilidade com as versões mais recentes das bibliotecas.

No terminal, execute o seguinte comando:

pip install dash plotly pandas dash-bootstrap-components

pip install dash plotly pandas dash-bootstrap-components

Organize a estrutura do projeto

O próximo passo para criar um dashboard com Python é organizar a estrutura do projeto. Para isso, crie uma nova pasta em seu computador (pode ser na área de trabalho ou em qualquer outro local da sua preferência). Para facilitar a explicação, vamos chamar essa pasta de criando_dashboard.

Em seguida, abra o VS Code (ou a IDE de sua escolha) e acesse a pasta recém-criada. Dentro dela, crie dois arquivos principais:

• app.py: será responsável por instanciar o dashboard em um IP interno para visualização no navegador;
• index.py: armazenará todo o código do dashboard e o gráfico. Sendo assim, este será o arquivo central do seu dashboard.

A estrutura inicial do projeto ficará assim:

criando_dashboard/
├── app.py
└── index.py

criando_dashboard/
├── app.py
└── index.py

Agora, siga as instruções abaixo:

Criando o arquivo app.py

Feito isso, adicione os códigos básicos em cada um desses dois arquivos para criar a estrutura fundamental do seu dashboard.

Para isso, insira o seguinte código no arquivo app.py:

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

Esse trecho cria a instância da aplicação com o Dash e carrega o tema padrão do Bootstrap. O uso do external_stylesheets garante uma interface visual mais elegante e facilita a criação de layouts responsivos. 

Criando o arquivo index.py

Abra o arquivo index.py e insira o seguinte código:

from app import app
import dash_bootstrap_components as dbc

app.layout = dbc.Container([])

if __name__ == "__main__":
    app.run_server(debug=True, port=8051)

from app import app
import dash_bootstrap_components as dbc

app.layout = dbc.Container([])

if __name__ == "__main__":
    app.run_server(debug=True, port=8051)

Perceba que, na primeira linha, importamos o conteúdo do arquivo app.py, que contém a instância da aplicação. Em seguida, definimos o layout do dashboard utilizando o componente dbc.Container, que funciona como o “bloco” principal do Bootstrap para estruturar a página.

Por fim, usamos app.run_server() para iniciar o servidor local na porta 8051. O argumento debug=True facilita o desenvolvimento, já que permite que o dashboard seja recarregado automaticamente sempre que houver alterações no código.

Visualizando o dashboard

Salve os arquivos e execute o projeto rodando o arquivo index.py. Se tudo estiver configurado corretamente, o terminal exibirá um link semelhante a este: 

Running on http://127.0.0.1:8051/

Running on http://127.0.0.1:8051/

Clique no link para abrir o dashboard no navegador. A página estará em branco por enquanto, já que ainda não adicionamos nenhum conteúdo. Mas essa é a estrutura base da aplicação que será desenvolvida nos próximos passos.

Leia também:

10 modelos de Dashboards em Python com Plotly e Dash

2. Construa o gráfico em Python usando Plotly

Organize a estrutura do projeto

Com as bibliotecas instaladas, organize seu projeto com uma estrutura simples, como esta: 

meu_dashboard/
├── app.py
├── index.py
├── data/
└── assets/

meu_dashboard/
├── app.py
├── index.py
├── data/
└── assets/

Nesse exemplo, a pasta data/ pode armazenar arquivos CSV ou outras fontes de dados. Já a pasta assets/ pode ser usada para arquivos de estilo, imagens, ícones ou fontes personalizadas.

Defina as fontes de dados

O próximo passo é escolher quais dados serão utilizados no seu gráfico. Você pode trabalhar com dados de diferentes fontes, como arquivos locais (CSV, Excel), bancos de dados (PostgreSQL, MySQL, SQLite etc.) e APIs públicas ou privadas.

Independentemente da origem, é importante fazer a limpeza e a validação dos dados antes de visualizá-los. Isso garante que o gráfico represente informações confiáveis e esteja no formato adequado.

Defina o tipo de gráfico

O Plotly oferece duas interfaces principais para criar gráficos:

• Plotly Express: mais simples e direto, ideal para começar rápido com poucos parâmetros;
• Graph Objects: oferece mais controle e personalização, sendo mais indicado para gráficos avançados ou compostos.

Com essa biblioteca, você pode construir gráficos de barras, linhas, pizza (pie chart), dispersão (scatter), histogramas, mapas e gráficos 3D (em aplicações mais complexas).

Todos eles são interativos por padrão. Isso significa que você pode passar o mouse sobre os dados, dar zoom, salvar como imagem, entre outras interações.

Exemplo: gráfico de pizza com Plotly Express

Para fins didáticos, vamos criar um gráfico simples do tipo pie (pizza), utilizando o Plotly Express. O gráfico mostrará a distribuição de quatro categorias com diferentes valores.

Para isso, você deve inserir o código abaixo no arquivo index.py:

import plotly.express as px

fig = px.pie(
    values=[15, 20, 35, 50],
    names=['Categoria A', 'Categoria B', 'Categoria C', 'Categoria D'],
    title='Distribuição de Categorias'
)

fig.show()

import plotly.express as px

fig = px.pie(
    values=[15, 20, 35, 50],
    names=['Categoria A', 'Categoria B', 'Categoria C', 'Categoria D'],
    title='Distribuição de Categorias'
)

fig.show()

Esse comando abrirá o gráfico em uma nova janela do navegador ou diretamente no ambiente da sua IDE, dependendo de onde o código estiver sendo executado. Esse gráfico será semelhante à imagem abaixo:

Se quiser se aprofundar nas possibilidades do Plotly, recomendamos a leitura do artigo Como fazer gráficos com Python, em que explicamos detalhadamente os principais tipos de gráfico, boas práticas e dicas de personalização.

3. Importe outros módulos necessários para o layout

Agora que já temos a estrutura básica do dashboard e o gráfico criado, vamos integrá-lo à interface da aplicação.

Para isso, você deve importar dois módulos essenciais da biblioteca Dash: html e dcc.

from dash import html, dcc

from dash import html, dcc

O módulo html permite criar elementos HTML no layout, como títulos, divisões, parágrafos, botões e muito mais. Já o módulo dcc (Dash Core Components) fornece os componentes interativos, como gráficos (dcc.Graph), menus suspensos (dcc.Dropdown), sliders, inputs, entre outros.

Depois disso, siga o passo abaixo:

Atualize o arquivo index.py

Abra o arquivo index.py e atualize seu conteúdo com os seguintes elementos:

1. A importação do html e dcc;
2. O código do gráfico que criamos anteriormente com o Plotly Express;
3. A definição do layout com o componente dcc.Graph, que exibirá o gráfico na interface.

Dessa forma, o código final ficará da seguinte forma:

from app import app
from dash import html, dcc
import plotly.express as px
import dash_bootstrap_components as dbc

# Criando o gráfico de pizza
fig = px.pie(
    values=[15, 20, 35, 50],
    names=['Categoria A', 'Categoria B', 'Categoria C', 'Categoria D'],
    title='Distribuição de Categorias'
)

# Definindo o layout do dashboard
app.layout = dbc.Container([
    html.H1("Meu Primeiro Dashboard com Python", className="text-center my-4"),
    dcc.Graph(figure=fig)
])

if __name__ == "__main__":
    app.run(debug=True, port=8051)

from app import app
from dash import html, dcc
import plotly.express as px
import dash_bootstrap_components as dbc

# Criando o gráfico de pizza
fig = px.pie(
    values=[15, 20, 35, 50],
    names=['Categoria A', 'Categoria B', 'Categoria C', 'Categoria D'],
    title='Distribuição de Categorias'
)

# Definindo o layout do dashboard
app.layout = dbc.Container([
    html.H1("Meu Primeiro Dashboard com Python", className="text-center my-4"),
    dcc.Graph(figure=fig)
])

if __name__ == "__main__":
    app.run(debug=True, port=8051)

Entenda o que esse código está dizendo:

• Criamos uma instância do gráfico com px.pie() e a armazenamos na variável fig;
• Utilizamos o componente dcc.Graph() para exibir o gráfico na interface;
• Adicionamos um título à página com html.H1();
• Todos os elementos estão organizados dentro de um dbc.Container(), que garante um layout limpo e responsivo.

Ao executar novamente o index.py, você verá o seu primeiro dashboard renderizado no navegador, agora com o gráfico de pizza visível na tela!

4. Insira os gráficos em dashboards

O próximo passo é organizar o layout do dashboard para exibir o conteúdo de forma visualmente agradável e responsiva.

Para isso, vamos utilizar alguns componentes da biblioteca dash_bootstrap_components, que facilitam a criação de interfaces mais modernas com base no framework Bootstrap. Veja abaixo os elementos que serão utilizados:

• dbc.Row e dbc.Col: criam a estrutura em linhas e colunas, como em um grid responsivo;
• dbc.Card: cria conteiners estilizados para agrupar elementos;
• dbc.CardBody: define a área de conteúdo dentro de um card;
• dcc.Graph: exibe o gráfico interativo;
• html.Legend: insere uma legenda ou subtítulo.

Todos esses componentes são abordados no curso Dashboards Interativos com Python, da Asimov Academy. Se você ainda não conhece a funcionalidade de cada um, vale a pena conferir!

Estruturando o layout com os componentes

Agora, vamos aplicar todos esses componentes devidamente no layout do dashboard. Veja o exemplo do código abaixo:

from app import app
from dash import html, dcc
import dash_bootstrap_components as dbc
import plotly.express as px

# Criando o gráfico de pizza
fig = px.pie(
    values=[15, 20, 35, 50],
    names=['Categoria A', 'Categoria B', 'Categoria C', 'Categoria D'],
    title='Distribuição de Categorias'
)

# Layout do dashboard
app.layout = dbc.Container([
    html.H1("Dashboard de Vendas", className="text-center my-4"),

    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.Legend("Gráfico de Vendas por Categoria", className="mb-2"),
                    dcc.Graph(figure=fig)
                ])
            ])
        ])
    ])
], fluid=True)

from app import app
from dash import html, dcc
import dash_bootstrap_components as dbc
import plotly.express as px

# Criando o gráfico de pizza
fig = px.pie(
    values=[15, 20, 35, 50],
    names=['Categoria A', 'Categoria B', 'Categoria C', 'Categoria D'],
    title='Distribuição de Categorias'
)

# Layout do dashboard
app.layout = dbc.Container([
    html.H1("Dashboard de Vendas", className="text-center my-4"),

    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.Legend("Gráfico de Vendas por Categoria", className="mb-2"),
                    dcc.Graph(figure=fig)
                ])
            ])
        ])
    ])
], fluid=True)

Entenda o que esse código está fazendo:

• html.H1: adiciona o título principal do dashboard;
• dbc.Container: envolve todo o layout da página;
• dbc.Row e dbc.Col: organizam o conteúdo em uma linha e coluna;
• dbc.Card: cria uma “caixa” com borda e sombra, destacando visualmente o gráfico;
• html.Legend: funciona como um subtítulo para o gráfico;
• dcc.Graph(figure=fig): exibe o gráfico interativo, usando a variável fig criada anteriormente.

Depois disso, ao rodar novamente o arquivo index.py, você verá o gráfico de pizza exibido dentro de uma seção bem organizada, com título e layout responsivo. Agora, sim, o seu dashboard começa a ganhar forma!

Se quiser adicionar mais gráficos ou filtros interativos depois disso, essa estrutura básica servirá como modelo para expandir o projeto.

Como criar gráficos em Python de forma profissional?

Até aqui, você aprendeu como inserir um gráfico simples em um dashboard com Python. No entanto, as bibliotecas Plotly e Dash oferecem muitos outros recursos que permitem criar visualizações verdadeiramente profissionais.

Com um pouco mais de prática, você pode adicionar diferentes tipos de gráficos, criar layouts personalizados e responsivos, aplicar estilos visuais com cores e temas variados, usar filtros dinâmicos, menus, botões interativos e muito mais.

Você aprende todas essas funcionalidades na Trilha de Dashboards Interativos com Python, da Asimov Academy.

Ao longo da trilha, você encontrará conteúdos aprofundados sobre Dash e Plotly, incluindo callbacks, construção de layouts, interatividade e o passo a passo para colocar seu projeto em produção e disponibilizá-lo para uso real.

Inscreva-se agora e aprenda a construir dashboards avançados do zero!

Trilha Dashboards Interativos com Python

Domine a criação de sistemas web modernos para análise de dados que rodam no navegador utilizando apenas Python.

Comece agora