19.01.2025

Como Remover os Rótulos do Eixo X no Chart.js: Opções de Configuração

Resposta Rápida

Você pode esconder os rótulos do eixo X no Chart.js configurando a seguinte opção na configuração do seu gráfico:

options: {
  scales: {
    x: {
      display: false // Esconder rótulos do eixo X
    }
  }
}

Isso irá esconder o eixo X juntamente com seus rótulos. Adicione o código acima à configuração do seu gráfico Chart.js e os rótulos do eixo X desaparecerão.

Como Esse Código Funciona?

Manter o Eixo, mas Remover os Rótulos

Se você deseja manter o eixo X visível, mas esconder apenas os rótulos, use a opção ticks:

options: {
  scales: {
    x: {
      ticks: {
        display: false // Rótulos removidos, eixo permanece
      }
    }
  }
}

Mudanças e Configurações de Versão

Desde Chart.js v2.1, o parâmetro scaleShowLabels: false foi substituído. Para evitar confusões, é recomendável verificar a documentação mais recente do Chart.js.

Problemas de Compatibilidade

Para versões do Chart.js anteriores a 2.1.4, a opção display: false pode funcionar de maneira inconsistente, então certifique-se de que seu código é compatível com a versão da biblioteca que você está utilizando.

Esconder a Legenda Globalmente

Se deseja esconder a legenda de todos os gráficos, use a seguinte configuração global:

Chart.defaults.global.legend.display = false; // Às vezes, a legenda é desnecessária

Observe que essa configuração não afeta os rótulos do eixo X.

Visualização

Imagine os rótulos do eixo X como minions alegres (🍌) fazendo uma apresentação divertida no seu gráfico. É hora deles tirarem uma pausa:

Antes: [📈🍌]
# O gráfico com minions amigáveis como rótulos.

Decisão do diretor: 🚫🍌
# Os minions foram instruídos a se afastar.

E o Chart.js assume o papel do diretor:

options: {
    scales: {
        xAxes: [{
            display: false // Minions não estão mais visíveis no gráfico!
        }]
    }
}

Depois: [📈😶] // Ao excluir os minions barulhentos — os rótulos, o gráfico se torna mais limpo e compreensível.

Análise Detalhada de Casos e Configurações Especiais

• Mudanças de Configuração por Versão: Dependendo da versão do Chart.js, você pode precisar usar xAxes ou x. Na versão 2, utilize xAxes, enquanto a partir da versão 3, use x.

• Inicialização com Rótulos Ocultos: Se você especificar configurações padrão no início da inicialização do gráfico, os rótulos estarão ocultos desde o início.

• Solução Tradicional em Versões Antigas: Em versões mais antigas, você pode combinar o uso de um array labels vazio com scaleShowLabels: false para esconder rapidamente os rótulos. Esse método pode te agradar se você preferir uma abordagem clássica.

Configurações Avançadas do Chart.js

Não Apenas Eixos

O Chart.js oferece opções para personalizar outros elementos do gráfico também, incluindo tooltips e velocidade de animação. Ao explorar todas as opções de configuração, você pode aprimorar seu gráfico globalmente.

Mantendo-se Atualizado com as Mudanças do Chart.js

Mantenha-se sempre informado sobre as alterações do Chart.js, pois elas podem incluir novos recursos para gerenciar e configurar seus gráficos.

Possibilidades Ilimitadas

O Chart.js oferece uma vasta gama de callbacks e plugins para definir a funcionalidade dos seus gráficos.

Recursos Úteis

1. Eixos | Chart.js — A documentação oficial do Chart.js irá te ajudar a aprender como configurar os eixos, escondê-los e muito mais.
2. Canvas API - Web API | MDN — Um guia completo sobre a API Canvas, que fundamenta o Chart.js.
3. Curso Introdutório sobre Chart.js - YouTube — Um guia Chart.js no YouTube, cobrindo os fundamentos de trabalhar com o Chart.js, incluindo a configuração de eixos.
4. Animações no Chart.js - CSS-Tricks — Um fórum do CSS-Tricks discutindo o uso de recursos de animação no Chart.js.
5. JSFiddle - Plataforma de Teste de Código — Neste recurso, você verá exemplos práticos de uso do Chart.js, incluindo a criação de gráficos sem rótulos do eixo X.

Video

Navigation