Couleurs affichées différemment sur chart.js

La documentation montre qu'il y a à la fois des couleurs d'arrière-plan et de contour à définir, vous ne donnez qu'une seule couleur donc cela suppose que vous faites référence au contour des barres. Il utilisera cette couleur pour les contours, puis une version fanée (plus claire) de la même couleur que la couleur d'arrière-plan des barres.

Essayez d'utiliser à la fois les couleurs d'arrière-plan et de contour, ou supprimez simplement le contour et analysez une couleur pour chaque barre après cela.

étant donné que les graphiques à barres dans charts.js ont borderColor et backgroundColor, vous pouvez les personnaliser dans votre propriété de jeu de données pour obtenir le même résultat que les histogrammes, je parle d'écrire qc comme ceci:

    let chartData = {labels: ['Neni problem','Branalita', 'Vadi me to', 'Vas...'], datasets: [
        {
          backgroundColor: 'rgba(40, 167, 69, 1)',
          borderWidth: 0,
          data: 40
        }
         ,
         ...
        }];

<bar-chart
  :data="chartData"
  suffix="%"
  height="100px"
  :stacked="true"
  :library="{ options: { tooltips: false } }"
>

et parce que vous ne voulez pas qu'il ait des couleurs de bordure et que vous voulez qu'il ait seulement une couleur d'arrière-plan unie, dans les options de jeu de données, je vous suggère de définir borderWidth sur 0 pour chaque barre et d'utiliser l'équivalent RVBA de vos couleurs hexadécimales avec alpha 1

Une solution consiste à, au lieu de donner les valeurs RVB HEX, transmettre les valeurs RVBA HEX dans l'accessoire de couleur. Si vous faites cela, vous pouvez voir que quel que soit le dégradé que vous choisissez, les deux graphiques affichent la même couleur et le même dégradé, de sorte que les couleurs seront identiques.

Pour faciliter l'utilisation, j'ai mis les couleurs dans une variable distincte dans cet exemple: https://codesandbox.io/s/immutable-worker-3qxgj

<template>
  <div class="hello">
    <column-chart :data="votesData" height="200px" :colors="[colors]">
    </column-chart>
    <bar-chart
      :data="chartData"
      suffix="%"
      height="100px"
      :colors="colors"
      :stacked="true"
      :library="{ options: { tooltips: false } }"
    >
    </bar-chart>
    <line-chart :data="data" :colors="colors" />
    <bar-chart
      :colors="colors"
      :data="booksData"
      suffix="%"
      height="200px"
      :stacked="true"
    ></bar-chart>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      colors: ["#28a745ff", "#007bffff", "#ffc107ff", "#dc3545ff"],
    };
  },
};
</script>