Estilizando títulos de gráficos com CSS no Grafana

Às vezes, sentimos a necessidade de dar um toque único aos dashboards do Grafana, moldando sua aparência para refletir exatamente o que queremos transmitir. No entanto, as configurações padrão dos painéis nem sempre nos oferecem essa liberdade.

Uma solução alternativa, que pode ser considerada um “hack”, é a modificação direta do CSS do dashboard. Essa abordagem permite um grau de customização mais avançado, indo além das opções convencionais oferecidas pelos painéis.

Esse tipo de ajuste pode causar alterações indesejadas na aparência do seu dashboard, por isso, após qualquer alteração no CSS, é essencial realizar vários testes no dashboard para garantir que os efeitos sejam os esperados.

Configuração necessária

Para aplicar as alterações utilizaremos o plugin HTML Graphics, sem título e com transparência ativada. Esse painel ficará invisível no dashboard, mas servirá como um “container” para o nosso código CSS.

Exemplo prático 1 — Alterar o tamanho da fonte e cor do título do painel do dashboard

Vamos começar criando um painel básico do tipo “Time Series”:

• Adicione um gráfico padrão e defina um título.
• Habilite a opção de transparência para ocultar o background do painel.
  
  

Passo a Passo:

Vamos configurar o HTML Graphics:

• Deixe o campo de título em branco
• Transparência: ativada
• Remova todo o conteúdo padrão (HTML/CSS)

Pronto! Temos agora um painel “fantasma” – invisível na interface

⚠️ Observação: Neste exemplo, focaremos apenas na edição do campo CSS root, sem utilizar os demais campos, como CSS (padrão), HTML ou JavaScript.

A maneira mais rápida e prática de aplicar mudanças no CSS é manipulando diretamente o atributo title do painel. Para isso, utilize o título do painel que você definiu anteriormente. Veja o exemplo:

[title="JLCP - TITLE PANEL 01"]{ 
/* Aqui aplicaremos os estilos desejados */ 
}

Aplicando estilos CSS

Agora, dentro da estrutura que criamos, podemos adicionar os estilos desejados. No exemplo abaixo, vamos alterar a cor e o tamanho da fonte do painel:

[title="JLCP - TITLE PANEL 01"]{ 
font-size: 15px; 
color: #41D882; 
}

Com essas alterações, o painel com o título “JLCP – TITLE PANEL 01” terá a fonte aumentada para 15px e a cor alterada para um verde vibrante (#41D882).

Exemplo prático 2 — Aplicando um estilo completo

Para deixar o painel ainda mais estilizado, podemos adicionar mais propriedades CSS. No exemplo abaixo, além de ajustar a cor e o tamanho da fonte, vamos incluir um fundo escuro, um espaçamento interno (padding), bordas arredondadas e uma borda sutil para dar um toque moderno e sofisticado.

Aqui está o código CSS completo:

[title="JLCP - TITLE PANEL 01"]{
font-size: 15px;
color: #41D882;
background: #1E293B;
padding: 5px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
}

O que cada propriedade faz:

• font-size: 15px;: Aumenta o tamanho da fonte para melhor legibilidade.
• color: #41D882;: Define a cor do texto como um verde vibrante.
• background: #1E293B;: Aplica um fundo escuro para contrastar com o texto.
• padding: 5px;: Adiciona um espaçamento interno ao redor do conteúdo.
• border-radius: 10px;: Arredonda as bordas do painel para um visual mais suave.
• border: 1px solid rgba(255, 255, 255, 0.08);: Insere uma borda sutil com transparência, destacando o painel sem chamar muita atenção.

Resultado:

Exemplo prático 3 — Manipulando Classes CSS

Com essas alterações, o painel ganha um visual profissional e alinhado ao estilo do seu dashboard. Essa técnica é perfeita para quem busca personalizações avançadas e únicas no Grafana!

Para identificar o nome da classe CSS utilizada nos títulos dos gráficos, abra as ferramentas de desenvolvedor do seu navegador:

• Pressione Ctrl + Shift + I (ou clique nos três pontos no canto superior direito do navegador → Mais ferramentas → Ferramentas do desenvolvedor).
• Com a aba Elementos selecionada, pressione Ctrl + Shift + C para ativar a ferramenta de inspeção por cursor.
• Passe o mouse sobre o título do gráfico no seu painel.

Você deverá visualizar uma classe semelhante a css-19gv2o1-panel-header, que é a responsável pela estilização do título.

⚠️ Observação: o nome da classe pode variar conforme a versão do Grafana ou se você estiver utilizando um tema customizado.

Aplicando Classes CSS

No Grafana, em nosso plugin “Fantasma” (HTML Graphics), vamos adicionar a classe CSS css-19gv2o1-panel-header e alinhar o título ao centro.

Aqui está o código CSS completo:

.css-19gv2o1-panel-header{
display: block;
justify-items: center;
}

O que cada propriedade faz:

• display: block;: Define o tipo de exibição do elemento, ocupa toda a largura disponível.
• justify-items: center;: Centraliza horizontalmente os itens dentro da classe.

Exemplo prático 4 — Adicionando novos elementos CSS

Agora que aprendemos a estilizar classes CSS no Grafana, podemos adicionar mais propriedades CSS. No exemplo abaixo, vamos ajustar a cor, o tamanho da fonte, vamos incluir um fundo escuro e uma borda mais arredondada.

Veja os exemplos abaixo:

[title="JLCP - TITLE PANEL 02"]{
font-size: 15px;
color: #41D882;
padding: 5px;
}

.css-19gv2o1-panel-header {
display: block;
justify-items: center;
background: #1E293B;
border-radius: 10px;
z-index: 4;
}

Exemplo prático 5

[title="JLCP - TITLE PANEL 02"]{
font-size: 15px;
color: #41D882;
padding: 5px;
background: #1E293B;
border-radius: 10px;
}

.css-19gv2o1-panel-header {
display: block;
justify-items: center;
z-index: 4;
}

Obrigado por acompanhar esse artigo.

Espero que esses exemplos tenham te ajudado a personalizar seus dashboards com mais liberdade e estilo. Se tiver dúvidas ou quiser compartilhar suas criações, me envie uma mensagem ou deixe um comentário. Até a próxima! 👋