Chart.js v2 : masquer les étiquettes des ensembles de données

Question

J'ai les codes suivants pour créer un graphique en utilisant Chart.js v2.1.3 :

var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            label: 'I want to remove this Label',
            data: prices,
            pointRadius: 0,
            borderWidth: 1
        }]
    }
});

Les codes semblent simples, mais je ne peux pas supprimer l'étiquette du graphique. J'ai essayé beaucoup de solutions que j'ai trouvées en ligne, mais la plupart d'entre elles utilisent Chart.js v1.x.

Comment puis-je supprimer les étiquettes des ensembles de données ?

Answer 1

Nouvelle solution ChartJS v3.1.1

La solution ci-dessus est correcte pour les versions précédentes de chart js avant la v3.1 pour la v3.1.1, utilisez ce qui suit

 ...
 options: {
  plugins:{
   legend: {
    display: false
   }
  }
 }

Answer 2

Pour ceux qui veulent supprimer les étiquettes d'axe réelles et pas seulement la légende dans 2021 (Chart.js v.3.5.1) . Remarque : cette opération supprime également les axes.

const chartWrap = document.querySelector('.chart-wrap')
const canvas = document.createElement('canvas')

chartWrap.appendChild(canvas)
const ctx = canvas.getContext('2d')

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Your', 'axis', 'labels'],
        datasets: [
            {
                label: 'Your legend label',
                data: [1, 3, 2],
                backgroundColor: '#54ACEF'
            }
        ]
    },
    options: {
        maintainAspectRatio: false,
        plugins: {
            legend: false // Hide legend
        },
        scales: {
            y: {
                display: false // Hide Y axis labels
            },
            x: {
                display: false // Hide X axis labels
            }
        }   
    }
})

<div class="chart-wrap" style="width: 200px; height: 100px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 3

new Chart('idName', {
      type: 'typeChar',
      data: data,
      options: {
        legend: {
          display: false
        }
      }
    });

Answer 4

Remplacer les options par ce snippet, corrigera pour les développeurs Vanilla JavaScript.

options: {
            title: {
                text: 'Hello',
                display: true
            },
            scales: {
                xAxes: [{
                    ticks: {
                        display: false
                    }
                }]
            },
            legend: {
                display: false
            }
        }