I have a chart and I am looking to modify the color of the labels
https://i.sstatic.net/vsw6x.png
The gray labels on the chart need to be changed to white for better readability
Here is my code snippet:
HTML5:
<div class="box-result">
<h5 class="title-result">Line Styles</h5>
<p-chart type="line" [data]="lineStylesData" [options]="lineOptions"></p-chart>
</div>
TS:
lineStylesData: any;
lineOptions: any;
constructor() {}
ngOnInit(): void {
this.lineStylesData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
color: 'red',
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
tension: 0.4,
borderColor: '#42A5F5',
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderDash: [5, 5],
tension: 0.4,
borderColor: '#66BB6A',
},
{
label: 'Third Dataset',
data: [12, 51, 62, 33, 21, 62, 45],
fill: true,
borderColor: '#FFA726',
tension: 0.4,
backgroundColor: 'rgba(255,167,38,0.2)',
},
],
};
this.lineOptions = {
legend: {
fontColor: '#fff',
},
scales: {
xAxes: [
{
ticks: {
fontColor: 'white',
},
},
],
yAxes: [
{
ticks: {
fontColor: 'white',
beginAtZero: true,
},
},
],
},
};
}
If you have any suggestions on how to change the font colors of the X and Y axis labels, please let me know. I have tried various stack overflow solutions with no success. Thank you in advance.