react-chartjs-2 change axes text color
I did a lot of searching but nothing I tried works to change the axes text color. However, I am able to change the grid color to white in scales.yAxes.grid.color
. This is what I have right now:
render(){
return (
<div className = "chart">
<Line
data = {this.state.chartData}
options= {{
maintainAspectRatio: false,
scales: {
yAxes:{
grid: {
drawBorder: true,
color: '#FFFFFF',
},
ticks:{
beginAtZero: true,
fontColor: 'white'
}
},
xAxes: {
grid: {
drawBorder: true,
color: '#FFFFFF',
},
ticks:{
beginAtZero: true,
fontColor: 'white'
}
},
}
}}
width = {20}
height = {200}
/>
</div>
)
}
}
font color can be set by "color" instead of "fontColor"
render(){
return (
<div className = "chart">
<Line
data = {this.state.chartData}
options= {{
maintainAspectRatio: false,
scales: {
yAxes:{
grid: {
drawBorder: true,
color: '#FFFFFF',
},
ticks:{
beginAtZero: true,
color: 'white',
fontSize: 12,
}
},
xAxes: {
grid: {
drawBorder: true,
color: '#FFFFFF',
},
ticks:{
beginAtZero: true,
color: 'white',
fontSize: 12,
}
},
}
}}
width = {20}
height = {200}
/>
</div>
)
}
}