Do you support angular 2+ (angular 4)?

Hi, I’m trying to implement Chart.js into the angular4 project and there seem to be some type issues.

Expected Behavior

The default chart should be displayed and the implementation should run as planned.

Current Behavior

When fetching the canvas element like described in the examples: const el = document.getElementById(‘myChart’); The error that is thrown looks like this:

ERROR in D:/www/weather-app/src/app/weather-chart/weather-chart.component.ts (23,31): Argument of type 'HTMLElement' is not assignable to parameter of type 'string | string[] | JQuery<HTMLElement> | CanvasRenderingContext2D | HTMLCanvasElement | CanvasRe...'.
  Type 'HTMLElement' is not assignable to type 'HTMLCanvasElement[]'.
    Property 'includes' is missing in type 'HTMLElement'.

When fetching the canvas element like this: const el = document.getElementById('myChart') as HTMLCanvasElement; The error that is thrown looks like this:

client?ffdb:119 D:/www/weather-app/src/app/weather-chart/weather-chart.component.ts (53,15): Argument of type '{ type: string; data: { labels: string[]; datasets: { label: string; data: number[]; backgroundCo...' is not assignable to parameter of type 'ChartConfiguration'.
  Types of property 'options' are incompatible.
    Type '{ scales: { yAxes: { ticks: { beginAtZero: boolean; }; }[]; }; }' is not assignable to type 'ChartOptions'.
      Types of property 'scales' are incompatible.
        Type '{ yAxes: { ticks: { beginAtZero: boolean; }; }[]; }' is not assignable to type 'ChartScales'.
          Types of property 'yAxes' are incompatible.
            Type '{ ticks: { beginAtZero: boolean; }; }[]' is not assignable to type 'ChartYAxe[]'.
              Type '{ ticks: { beginAtZero: boolean; }; }' is not assignable to type 'ChartYAxe'.
                Types of property 'ticks' are incompatible.
                  Type '{ beginAtZero: boolean; }' is not assignable to type 'TickOptions'.
                    Object literal may only specify known properties, and 'beginAtZero' does not exist in type 

Possible Solution

Steps to Reproduce (for bugs)

1. Install Chart.js
2. import * as Chart from 'chart.js'; in the desired component
3. Add the canvas template <canvas id="myChart" width="400" height="400"></canvas>
4. try to execute the default example

const el = document.getElementById('myChart');
const myChart = new Chart(el, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });

Context

I’m trying to implement the library…

Environment

• Chart.js version 2.6.0:
• Angular v4.3.3
• Browser name and version: Chrome latest (60)
• Node v7.7.2

[phtn]

I was getting the same error and assigned canvas type to any like so:

const canvas: any = document.getElementById('myChart'); const ctx = canvas.getContext('2d');

[etimberg]

@mnemanja what definitions are you using for the options? Looks like beginAtZero is not included hence the type errors.

I don’t know much about angular, but I think you have to do const el = document.getElementById('myChart') as HTMLCanvasElement otherwise it looks like it’s only giving you HTMLElement

Not sure why it won’t render though. Have you looked at something like https://github.com/valor-software/ng2-charts ?