Home > Back-end >  Chart.js with Angular component - Type 'string' is not assignable to type 'ChartTitle
Chart.js with Angular component - Type 'string' is not assignable to type 'ChartTitle

Time:10-24

I am trying to implement one chat component to my website with Chart.js but I am getting the error

"Type 'string' is not assignable to type 'ChartTitleOptions | undefined'"

, is there any problem with the version?

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { Chart } from 'chart.js'

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {
  @Input() stock!: string;
  LineChart:any = []
  constructor() { }

  ngOnInit() {
    this.LineChart = new Chart('linechart', {
      type: 'line',
      data: {
        labels: ['jan', 'fev'],
        datasets: [{
          label: 'Number xxxxxx',
          data: [1, 2],
          fill: false,
          lineTension: 0.3,
          borderColor: 'red',
          borderWidth: 1
        }]
      },
      options: {
        title: 'Line Chart',
        display: true
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    });
  }
}

CodePudding user response:

The title property does not take a string for the options. Instead it takes an object where you can configure things about the title including the string. So your config will look like this:

options: {
  title:{
    display: true,
    text: 'TitleText to display'
  }
}

Documentation: https://www.chartjs.org/docs/2.9.4/configuration/title.html

  • Related