Angular using PrimeNG charjs problem with font colors-CodePudding

Well I have this chart and I want to change the color of the labels

https://i.stack.imgur.com/vsw6x.png

the labels that are seen in gray I want to turn it to white, because it cannot be read

My code

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,
            },
          },
        ],
      },
    };

  }

Any way to solve this problem with the font colors of the X and Y axis labels. Thanks in advance I tried various stack overflow codes with no positive results

CodePudding user response：

You are using V2 syntax while using V3, there are some major breaking changes between these 2 version, for all changes please read the migration guide for all changes.

To resolve your issue you options need to look like this:

options: {
  scales: {
    x: {
      ticks: {
        color: 'white'
      }
    },
    y: {
      ticks: {
        color: 'white'
      }
    }
  },
  plugins: {
    legend: {
      labels: {
        color: 'white'
      }
    }
  }
}