web-dev-qa-db-fra.com

Chart.js - Augmentez l'espacement entre la légende et le graphique

J'ai un graphique à barres où j'ai dessiné 3 lignes verticales, chacune avec sa propre étiquette en haut. Je voudrais que ces étiquettes soient au-dessus du haut de l'axe des y (au-dessus de la ligne de 30% dans l'exemple) mais au-dessous de la légende. Je ne peux pas comprendre comment augmenter l'espace entre la légende du haut et le graphique de sorte que je puisse avoir mes étiquettes de lignes verticales (15, 24 et 33) hors du graphique lui-même mais en dessous de la légende. Des idées?

Example Chart

chart.jschart.js2
20
Bryan Lewis

Malheureusement, comme il n'y a pas d'option de configuration pour gérer cela, la seule façon d'obtenir le résultat souhaité est d'étendre Chart.Legend et d'implémenter le rappel afterFit().

Voici un rapide codepen montrant comment faire exactement cela. Pour modifier l'espacement, modifiez simplement la valeur de la ligne 9 (actuellement définie sur 50). En outre, cela ne fonctionne bien sûr qu'avec la légende en haut. Espérons que l'exemple soit suffisamment clair pour que vous puissiez le modifier au cas où vous souhaiteriez déplacer votre légende ailleurs.

14
jordanwillis

Si vous voulez augmenter l'espacement dans tous les graphiques, vous pouvez mettre ce code avant de créer:

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 50;
};

Bien sûr, je n'essaye pas mais je pense que vous pouvez le changer (ou copier l'objet Chart d'origine avant, pour conserver le rembourrage d'origine).

Au revoir,

16
Dorian Maliszewski

Si vous souhaitez appliquer un remplissage sous la légende pour certains graphiques uniquement dans votre application:

ChartJS> = 2.1.0 

Chart.plugins.register({
  id: 'paddingBelowLegends',
  beforeInit: function(chart, options) {
    chart.legend.afterFit = function() {
      this.height = this.height + 50;
    };
  }
});

// ----------------------------------
// disable the plugin only for charts
// where you DO NOT WANT the padding
// ----------------------------------

// for raw ChartJS use:
var chart = new Chart(ctx, {
  config: {
    plugins: {
      paddingBelowLegends: false
    }
  }
});

// for angular-chartjs:
$scope.myChart.options.plugins = { paddingBelowLegends: false }
// then in template:
// <canvas class="chart ..." chart-options="myChart.options" ... />

ChartJS> = 2.5.0

Des plugins spécifiques pour chaque graphique sont supportés, il devrait être possible de faire:

var chart = new Chart(ctx, {
  plugins: [{
    beforeInit: function(chart, options) {
      chart.legend.afterFit = function() {
        this.height = this.height + 50;
      };
    }
  }]
});

Voir documentation ChartJS + inspiré par cette autre réponse

7
Frosty Z

Cela m'a aidé après 2 jours de recherche.

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 50;
};

mettre à jour ceci dans le fichier module.ts

0
sahil ralkar

J'utilise react-chartjs-2 (mais ce n'est qu'un port et utilise le même objet de configuration) et j'ai pu y parvenir en changeant la configuration des étiquettes imbriquée dans la configuration de la légende:

chartOptions = {
  legend: {
    labels: {
      padding: 50 -> this one.
    }
  },

Vous pouvez vérifier la description de la propriété ici: https://www.chartjs.org/docs/latest/configuration/legend.html

J'espère que ça aide.

0
Itsca