Chart.js: Do you support angular 2+ (angular 4)?

[mnemanja]

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

[andig]

I'm really just guessing here but does

const el = document.getElementById('myChart').getContext('2d');

make a change for you?

[mnemanja]

First of all thanks for the awesomely quick reply :)

Unfortunately, that results in the following error:
Property 'getContext' does not exist on type 'HTMLElement'.

I've tried also defining the type, but the result stays unchanged:

const el = <HTMLCanvasElement> document.getElementById('mycanvas');
const ctx = el.getContext("2d");

[andig]

Could you console.log(el)?

[mnemanja]

Sure thing. Here is the screenshot of both el and ctx. Let me know if you need any more details:

edit:
I've found that after removing beginAtZero: true from options the error gets removed, but still, nothing gets rendered.

[andig]

Giving up, sorry.

[mnemanja]

Nooooooooooo! :)

Thanks for trying. I hope someone else gives this a shot because I'm kind of on the deadline.

[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 ?

[mnemanja]

Hi @etimberg
I've tried all that, except ng2-charts, which after implementation returned successful results.
Thanks!

Although I will not close this issue since the chart.js implementation still remains a mystery.

[simonbrunel]

Is it really the Chart.js implementation which remain a mystery? :)

I don't know Angular either but if you can mock up a minimal live example (jsfiddle?) that reproduces the issue, it would greatly help to investigate what's going on.

[mnemanja]

Hi @simonbrunel ,
I'll see that I mock up a working example this weekend.

[mnemanja]

@simonbrunel ,
I've tried the same code (reverted the repo to that moment of implementation) and I was not able to reproduce the errors.

The code implementation worked with this all of the following ways of fetching the canvas element:

const el = <HTMLCanvasElement> document.getElementById('myChart'); 

as well as

const el = <HTMLCanvasElement> document.getElementById('myChart');
const ctx = el.getContext('2d');

and also, as per @JaroslavPrt 's suggestion (which I've also tried before)

@ViewChild('chartEl') chartEl;
const el = this.chartEl.nativeElement;

Each of these implementations weren't werking couple of days ago, and now they are. I cannot say for certain why and what the difference is, since nothing changed, but alas...

However, for any of these implementations to work, I had to wrap the canvas with the block element <div/> in my case. Otherwise, the chart was simply not visible.

Thanks for your time @etimberg , @simonbrunel and @andig and all of the effort you guys offered, but as it turns out, aside from the div issue, errors coming from the implementation were probably all mine. I apologize for that.

[simonbrunel]

@mnemanja glad to read that it works now, feel free to reopen if the problem reappears. Note that if your chart is responsive (default), then it's highly recommended to wrap the canvas in a dedicated div.

[mnemanja]

@simonbrunel
Thanks! :)

Here's the implementation :) Responsive and all :)
https://github.com/mnemanja/weather-app

[jagadeeshg74]

Wonderful work mnemanja :-)

[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');

[halilkocaerkek]

I have solved the same problem with this line.

const canvas = document.getElementById('stage') as HTMLCanvasElement;
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
....
}

[Arunwahatule85]

Facing same issue but still not getting solution on this.