Change color of measure unit with Chart.js

问题

I'm using Chart.js to create a bar chart. Behind the cart there is a dark green background so it's hard to see the numbers in black that are displayed on y and x axys.

This is how I generate my chart:

document.getElementsByClassName("home-message")[0].innerHTML='<canvas id="myChart" width="400" height="400"></canvas>'
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
color: 'white',
    data: {
        labels: ['Bar', 'Mensa', 'Ingresso'],
        datasets: [{
            label: 'Prodotti venduti',
            borderColor: 'rgba(255, 255, 255)',
            data: [551, 1470, 2354],
            backgroundColor: [
                'rgba(255, 99, 132)',
                'rgba(54, 162, 235)',
                'rgba(255, 206, 86)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {yAxes: [{ticks: {beginAtZero: true}}]},
        legend: {display: false, labels: {fontColor: 'white'}},
        title: {display: true,text: 'Custom Chart Title'}
    }
});

I checked the Chart.js page on how to customize the chart but I haven't find anything to change the color of these numbers. Check this image if you don't know what numbers I am talking about

Is there a way to change the color of these numbers to white?

回答1:

You can change the color of multiple parts of the chart:

GridLines (the vertical or horizontal lines in the chart):

gridLines: { 
  color: '#5555ff'
}

Ticks (the numbers you speak of):

ticks: {
  fontColor: '#5555ff'
},

ScaleLabels (Name of the axis and its values):

scaleLabel: {
  fontColor: '#5555ff'
}

These are all options you can specify at the options of an axis.

options: {
  scales: {
    xAxes: [{
      // You insert the above code here
    ]}
  }
}

Edit: Here is a picture of the options I described with the code I used:

xAxes: [{
  ticks: {
    fontColor: 'red'
  },
  gridLines: {
    color: 'blue'
  },
  scaleLabel: {
    display: true,
    labelString: 'Employee',
    fontSize: 20.0,
    fontColor: 'green'
  }
}]

回答2:

try this

...
options: {
   scales: {
          yAxes: [{gridLines: { color: "#ffffff" },
                   scaleLabel: {
                            display: true,
                            fontColor:'#ffffff',
                            fontSize:12
                        },}]
          }
}
..

来源：https://stackoverflow.com/questions/58875337/change-color-of-measure-unit-with-chart-js

标签

javascript

html

chart.js