Search code examples
angularwebchart.js

Chart.js How to edit the title label color


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!


Solution

  • "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