Suppression de la légende sur les graphiques avec chart.js v2

Question

Je fais une page d'accueil en utilisant, Bootstrap, JQuery et Chart.js (v2). J'avais ma mise en œuvre qui fonctionnait en utilisant la version 1, mais récemment j'ai découvert Bower et téléchargé la version 2 à l'aide de cela.

Je fais une grille de 4 colonnes contenant chacune un graphique circulaire, cependant l'échelle en v2 est un peu confuse pour moi à mettre en place. Je veux que les graphiques soient réactifs afin qu'ils s'adaptent correctement aux appareils plus petits tels que les tablettes et les smartphones, et l'un de mes problèmes est de me débarrasser de la légende des graphiques ainsi que des informations qui apparaissent lorsque l'on survole les sections de mon graphique avec la souris.

index.html

functions.js

$(document).ready(function(){
    var canvas = $("#chart1");
    var data = {
        labels: [],
        datasets: [{
            data: [10, 10],
            backgroundColor: ["#F7464A", "#FDB45C"],
            hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
        }]
    };

    var chart1 = new Chart(canvas, {
        type: "pie",
        data: data,
    });
});

Si je retire le champ "labels" vide, le graphique ne fonctionne plus. Et à en juger par l'apparence, il y a un petit espace en haut du graphique qui pourrait indiquer que les en-têtes sont écrits, mais ce ne sont que des chaînes vides.

Est-ce que quelqu'un a une idée de comment supprimer la légende et la description qui apparaît en survol ? Je n'arrive tout simplement pas à comprendre comment cela fonctionne.

Je vais créer un jsfiddle dès que j'aurai le temps !

EDIT : Lien vers la documentation : https://nnnick.github.io/Chart.js/docs-v2/#getting-started

Answer 1

L'objet options peut être ajouté au graphique lors de la création du nouvel objet Chart.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});

Answer 2

Vous pouvez modifier les options par défaut en utilisant Chart.defaults.global dans votre fichier javascript. Donc, vous voulez changer les options de légende et de tooltip.

Supprimer la légende

Chart.defaults.global.legend.display = false;

Supprimer le Tooltip

Chart.defaults.global.tooltips.enabled = false;

Ici se trouve un fiddler fonctionnel.

Answer 3

À partir de la version 3.x de chart.js : les espaces de noms legend, title et tooltip sont déplacés des options vers options.plugins.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
          plugins:{   
             legend: {
               display: false
                     },
                  }
             }
});

Answer 4

Modifier la réponse d'Ishan

Si vous utilisez React comme moi,

const data = {
...
}

const options = {
  plugins: {
    legend: {
      display: false,
    },
  },
};

Answer 5

Il vous suffit d'ajouter cette ligne légende: { afficher: false }