0

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
              }]
            }
          }
        })
      })
Improve this question

3 Answers 3

Reset to default
2

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%2Fapp%2Fapp.component.html

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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
                       }
                    }
                  ]
                 }
              }
Improve this answer

3 Comments

No it doesnt work, there is still the error: this: this Type 'Chart<"line", any, unknown>' is missing the following properties from type 'any[]': length, pop, push, concat, and 28 more. associated with the this.chart and Type '{ ticks: { display: true; }; }[]' is not assignable to type '_DeepPartialObject<{ type: "linear"; } & CartesianScaleOptions & { beginAtZero: boolean; suggestedMin?: number; ' with the lines of code xAxes and yAxes
Can you post a stackblitz? It'd be easier to diagnose.
stackblitz.com/edit/…
0

There were a number of things I corrected. I referenced the ChartJS docs and got the canvas tag a different way than you did.

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

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  chart: any;

  ngAfterViewInit() {
    let ctx: any = document.getElementById("lineChart") as HTMLElement;
    var data = {
      labels: ["match1", "match2", "match3", "match4", "match5"],
      datasets: [
        {
          label: "TeamA Score",
          data: [10, 50, 25, 70, 40],
          backgroundColor: "blue",
          borderColor: "lightblue",
          fill: false,
          lineTension: 0,
          radius: 5
        },
        {
          label: "TeamB Score",
          data: [20, 35, 40, 60, 50],
          backgroundColor: "green",
          borderColor: "lightgreen",
          fill: false,
          lineTension: 0,
          radius: 5
        }
      ]
    };
  
    //options
    var options = {
      responsive: true,
      title: {
        display: true,
        position: "top",
        text: "Line Graph",
        fontSize: 18,
        fontColor: "#111"
      },
      legend: {
        display: true,
        position: "bottom",
        labels: {
          fontColor: "#333",
          fontSize: 16
        }
      }
    };
  
    //create Chart class object
    var chart = new Chart(ctx, {
      type: "line",
      data: data,
      options: options
    });
  }
}
Improve this answer

2 Comments

hey i have a question, what if you want to display data stored in the database, (that are the variables: inoperEqn and operEqu) how can i go about incoorperating that in the above solution
In order to make the data dynamic, replace the hard coded data values with a reference. For instance: data: this.chartDataArray. this.chartDataArray being an array values are pushed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.