web-dev-qa-db-fra.com

Couleur de l'étiquette Chart.js

J'utilise chart.js pour créer un graphique à barres et n'arrive pas à modifier les couleurs de l'étiquette ni les couleurs de la légende. J'ai compris comment changer les couleurs des ticks, mais je ne sais pas où placer le 'scaleFontColor', si c'est effectivement ce que je dois utiliser.

Voici un lien vers ce à quoi il ressemble maintenant. http://imgur.com/nxaH1mk

Et voici mon code:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    scaleFontColor: "white",
    type: "bar",
    data: {
        labels: <?php echo json_encode($timeSlice); ?>, 
        datasets: [{
            label: "A Label",
            backgroundColor: "rgba(159,170,174,0.8)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(232,105,90,0.8)",
            hoverBorderColor: "orange",
            scaleStepWidth: 1,
            data: <?php echo json_encode($myCount); ?>
        }]
    },
    options: {
        legend: {
            fontColor: "white"
        },
        scales: { 
            yAxes: [{
                ticks: {
                    fontColor: "white",
                    stepSize: 1,
                    beginAtZero: true
                }
            }]
        }
    }
});

Toute aide serait grandement appréciée.

javascriptchart.js
33
PhantomSalt

Guh je l'ai résolu, désolé pour la question. Mais je suppose que je vais laisser une réponse au cas où quelqu'un d’autre se heurterait à mon problème.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: "bar",
    data: {
        labels: <?php echo json_encode($timeSlice); ?>, 
        datasets: [{
            label: "My Label",
            backgroundColor: "rgba(159,170,174,0.8)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(232,105,90,0.8)",
            hoverBorderColor: "orange",
            scaleStepWidth: 1,
            data: <?php echo json_encode($myCount); ?>
        }]
    },
    options: { 
        legend: {
            labels: {
                fontColor: "white",
                fontSize: 18
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 18,
                    stepSize: 1,
                    beginAtZero: true
                }
            }],
            xAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 14,
                    stepSize: 1,
                    beginAtZero: true
                }
            }]
        }
    }
});
79
PhantomSalt