Error when implementing charts.js in angular-CodePudding

I am trying to implement charts.js using mean stack, and when implementing the charts as recommended by the chart.js website, there is an error presented. When trying to implement the charts in the component.ts, i am getting the error:

Type 'Chart<"line", any, unknown>' is missing the following properties from type 'any[]': length, pop, push, concat, and 28 more.

33 this.chart = new Chart('canvas',{

and the error:

Type '{ display: true; }[]' is not assignable to type '_DeepPartialObject<{ type: "linear"; } & CartesianScaleOptions & { beginAtZero: boolean; suggestedMin?: number; suggestedMax?: number; grace?: string | number; ticks: { format: NumberFormatOptions; precision: number; stepSize: number; count: number; }; }> | _DeepPartialObject<...> | _DeepPartialObject<...> | _DeepPa...'. Type '{ display: true; }[]' is not assignable to type '_DeepPartialObject<{ type: "timeseries"; } & Omit<CartesianScaleOptions, "min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 4 more ...; ticks: { ...; }; }>'. Types of property 'reverse' are incompatible. Type '() => { display: true; }[]' is not assignable to type 'boolean'.

55 xAxes: [{

The component.ts:

this.chart = new Chart('canvas',{
        type: 'line',
          data: {
            labels: areaCode,
            datasets: [
              {
                data: inoperEqu,
                borderColor: '#3cba9f',
                fill: false
              },
              {
                data: operEqu,
                borderColor: '#ffcc00',
                fill: false
              },
            ]
          },
          options: {
            legend: {
              display: false
            },
            scales: {
              xAxes: [{
                display: true
              }],
              yAxes: [{
                display: true
              }]
            }
          }
        })
      })

CodePudding user response：

I think your scales are incorrect. That may be what's causing the error. Try changing

options: {
            legend: {
              display: false
            },
            scales: {
              xAxes: [{
                display: true
              }],
              yAxes: [{
                display: true
              }]
            }
          }

to:


    options: {
                legend: {
                  display: false
                },
                scales: {
                  xAxes: [
                    {
                      ticks: {
                        display: true
                       }
                    }
                  ],
                  xAxes: [
                    {
                      ticks: {
                        display: true
                       }
                    }
                  ]
                 }
              }

CodePudding user response：

3 things:

First you define chart as an empty array and then you try to override it with an object. Angular does not like this because it expects an array. So you either need to push it to the array or define it otherwise.

Second, in your html you only render the canvas once the chart variable is set. This does not work afaik since chart.js needs the canvas to create the chart.

Third, your config is in V2 format thats why you also get ts errors on it. Updating to V3 solves that issue. For all changes between V2 and V3 you can read the migration guide.

  ngOnInit(): void {
    new Chart('canvas', {
      type: 'line',
      data: {
        labels: [],
        datasets: [
          {
            data: [],
            borderColor: '#3cba9f',
            fill: false,
          },
          {
            data: [],
            borderColor: '#ffcc00',
            fill: false,
          },
        ],
      },
      options: {
        plugins: {
          legend: {
            display: false,
          },
        },
        scales: {
          x: {
            ticks: {
              display: true,
            },
          },
          y: {
            ticks: {
              display: true,
            },
          },
        },
      },
    });
  }

<canvas id="canvas"></canvas>

Stakcblitz: https://stackblitz.com/edit/angular-ivy-t8gqyk?file=src/app/app.component.html