Comment définir la valeur de l'axe Y dans un graphique à barres verticales à l'aide du graphique JS

Question

Dans ce graphique à barres verticales, l'axe Y a des valeurs positives et négatives.

Je souhaite utiliser des entiers positifs au-dessus et en dessous de la valeur zéro.

J'utilise la version 4.2.1

Que dois-je faire ?

Exemple de graphique vertical

var MOIS = [
      "Janvier",
      "Février",
      "Mars",
      "Avril",
      "Mai",
      "Juin",
      "Juillet",
      "Août",
      "Septembre",
      "Octobre",
      "Novembre",
      "Décembre",
    ];
    var couleur = Chart.helpers.color;
    varbarChartData = {
      étiquettes : ["janvier", "février", "mars", "avril", "mai", "juin", "juillet"],
      ensembles de données : [
        {
          étiquette : « Ensemble de données 1 »,
          Couleur d'arrière-plan : 'rgba(255, 201, 14, 1)',
          borderColor : 'rgba(255, 201, 14, 1)',
          largeur de bordure : 1,
          données: [
            dix,
            20,
            30,
            40,
            50
          ],
        },
        {
          étiquette : « Ensemble de données 2 »,
          Couleur d'arrière-plan : 'rgba(255, 201, 14, 1)',
          borderColor : 'rgba(255, 201, 14, 1)',
          largeur de bordure : 1,
          données: [
            -100,
            -200,
            -300,
            -400,
            -500
          ],
        },
      ],
    } ;

    var ctx = bloodPressureChart ;
    nouveau graphique (ctx, {
      tapez : "barre",
      données : barChartData,
      options : {
        réactif : vrai,
        légende: {
          position : "haut",
        },
        titre: {
          affichage : vrai,
          texte : "Graphique à barres Chart.js",
        },
      },
    });
Voici mon code utilisant le graphique JS. 
Mon diagramme de code

Answer 1

Si vous souhaitez simplement modifier le texte des étiquettes de l'axe Y, vous pouvez les modifier entièrement en définissant la fonction options.scales.y.ticks.callback, consultez la Documentation et la Référence API pour plus de détails. Dans votre cas, pour faire lire des valeurs négatives comme positives, vous pouvez utiliser :

callback: function(val){
    return this.getLabelForValue(Math.abs(val));
}

ou

callback: function(val){
    return this.getLabelForValue(val).replace(/^-/, '');
}

var ctx = document.getElementById('chart1');
var MONTHS = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
];

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "Dataset 1",
            backgroundColor: 'rgba(255, 201, 14, 1)',
            borderColor: 'rgba(255, 201, 14, 1)',
            borderWidth: 1,
            data: [
                10,
                20,
                30,
                40,
                50
            ],
        },
        {
            label: "Dataset 2",
            backgroundColor: 'rgba(255, 201, 14, 1)',
            borderColor: 'rgba(255, 201, 14, 1)',
            borderWidth: 1,
            data: [
                -100,
                -200,
                -300,
                -400,
                -500
            ],
        },
    ],
};

new Chart(ctx, {
    type: "bar",
    data: barChartData,
    options: {
        responsive: true,
        legend: {
            position: "top",
        },
        title: {
            display: true,
            text: "Chart.js Bar Chart",
        },
        scales:{
            y: {
                ticks: {
                    callback: function(val){
                        return this.getLabelForValue(Math.abs(val));
                        // or: //return this.getLabelForValue(val).replace(/^-/, '');
                    },
                }
            }
        },
    },
});

<canvas id="chart1" style="height:500px"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"
        integrity="sha512-t41WshQCxr9T3SWH3DBZoDnAT9gfVLtQS+NKO60fdAwScoB37rXtdxT/oKe986G0BFnP4mtGzXxuYpHrMoMJLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>