CODEWITHSUNDEEP
angularwebchart.js
Twenny
Twenny

Reputation: 65

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!

Upvotes: 2

Views: 546

Answers (1)

Fabian
Fabian

Reputation: 175

"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

Upvotes: 2

Related Questions