graphique empilé chart.js qui se chevauche

Question

Je crée un graphique à barres empilées mais j'en ai besoin non seulement pour ajouter les deux valeurs ensemble et pour l'afficher.

Par exemple: stackgraph

Ce graphique est censé afficher le pourcentage "objectif" et le pourcentage réel. Donc, si la colonne a une valeur d'objectif de 70 et une valeur réelle de 30, elle affichera la couleur du nombre réel de 0 à 30, puis continuera la couleur d'objectif de 30 à 70.

Y a-t-il une façon de les faire se chevaucher comme ça et pas seulement un total de 100?

Answer 1

Vous devez ajouter ces paramètres à votre code - activez l'empilement pour X et désactivez-le pour l'axe Y:

  xAxes: [{ stacked: true }],
  yAxes: [{
    stacked: false,
    ticks: {
      beginAtZero: true,
    },
  }]

Answer 2

Peu importe, j'ai trouvé la réponse.

options: {
              scales: {
                xAxes: [{ stacked: true }],
                yAxes: [{
                        ticks: {
                            beginAtZero:true
                        },
                        stacked: false
                }]
              }
            }

Il vous suffit de définir les xAxes empilés sur true et les yAxes sur false