Skip to content Skip to sidebar Skip to footer

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

Solution 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:

Image

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

Solution 2:

try this

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

Post a Comment for "Change Color Of Measure Unit With Chart.js"