Im working on a project where I display charts of stocks, everything works fine but I can't find how to change the title color above the chart like here: "AAPL" here

This is my code so far:

  public renderChart(xData, yData, symbol){
    this.chart = new Chart("canvas"   symbol, {
      type: "line",
      data : {
        labels: xData,
        datasets: [{
          label: symbol,
          data: yData,
          backgroundColor: "#fdb44b",
          borderColor: "#00204a",
        }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            ticks: { color: '#f5f5f5'}
          },
          x: {
            ticks: { color: "#f5f5f5" }
          }
        }}
    })
  }

Any help is appreciated!

CodePudding user response：

"AAPL" is not the chart title it's the label of the legend.

To change that color, place the following inside your options block.

    options: {
      plugins: {
        legend: {
          labels: {
            color: 'red'
          }
        }
      },
   ...
   } 

https://www.chartjs.org/docs/latest/configuration/legend.html

CodePudding user response：

To change the title color of a chart in Chart.js, you can use the title.fontColor option. Here is an example of how you could modify your code to change the title color of your chart:

public renderChart(xData, yData, symbol) {
  this.chart = new Chart("canvas"   symbol, {
    type: "line",
    data: {
      labels: xData,
      datasets: [
        {
          label: symbol,
          data: yData,
          backgroundColor: "#fdb44b",
          borderColor: "#00204a",
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        fontColor: "#00204a",
        text: symbol,
      },
      scales: {
        y: {
          ticks: { color: "#f5f5f5" },
        },
        x: {
          ticks: { color: "#f5f5f5" },
        },
      },
    },
  });
}

In this code, we added the title option to the options object of the chart. The title option has the following properties:

• display: Set to true to display the title on the chart
• fontColor: The color of the title text
• text: The text of the title

We set the fontColor to "#00204a" to change the color of the title, and set the text to the symbol variable to display the symbol as the title of the chart.

I hope this helps!