I am using chart.js version 2.2.1
in my angular 2
app.
When call the constructor of Chart
an error is displayed:
Supplied parameters do not match any signature of call target
.
And npm start
command does not compile the app.
var myChart = new Chart(ctx, {
type: this.chartType,
data: chartData,
options: chartOptions
});
By using the above method the chart is drawn in browser.
(But I have to: 1) comment the code which creates the Chart, 2) run npm start
,
3) uncomment the code)
I have reinstalled TypeScript Definitions (d.ts) for chartjs
In chart.d.ts
is that signature of Chart
:
interface Chart {
Line(data: LinearChartData, options?: LineChartOptions): LinearInstance;
Bar(data: LinearChartData, options?: BarChartOptions): LinearInstance;
Radar(data: LinearChartData, options?: RadarChartOptions): LinearInstance;
PolarArea(data: CircularChartData[], options?: PolarAreaChartOptions): CircularInstance;
Pie(data: CircularChartData[], options?: PieChartOptions): CircularInstance;
Doughnut(data: CircularChartData[], options?: PieChartOptions): CircularInstance;
}
declare var Chart: {
new (context: CanvasRenderingContext2D): Chart;
defaults: {
global: ChartSettings;
}
};
According to that Typescript Definition I have to create the Chart in that way:
var myChart = new Chart(ctx).Line(chartData, chartOptions);
By calling in this way the Chart
instance does not contain Line(/*...*/)
function.
How can I fix the problem?
I have installed typings for chart.js as is suggested here:
https://www.nuget.org/packages/chartjs.TypeScript.DefinitelyTyped/
To resolve the problem listed in question:
Q:
When call the constructor of Chart an error is displayed:
for the setup (angular2-rc4, chart.js-2.2.1),
In the component where the Chart
is instantiated declare the global variable
Chart: declare var Chart: any;
The whole code is bellow:
import { Component, Input, Output,
EventEmitter, ElementRef,
Inject, AfterViewInit} from '@angular/core';
declare var Chart: any; //THIS LINE resolves the problem listed in question!!!
@Component({
selector: 'my-chart',
template: `<canvas height="{{chartHeight}}"></canvas>`,
styles: [`:host { display: block; }`]
})
export class LinearChartDirective implements AfterViewInit {
@Input() chartData: Array<any>;
@Input() chartXAxisLabels: Array<any>;
@Input() showLegend: boolean;
@Input() legendLabel: string;
@Input() chartHeight: number;
chart: any;
constructor( @Inject(ElementRef) private element: ElementRef) { }
ngAfterViewInit() {
let context = this.element.nativeElement.children[0].getContext('2d');
this.createChart(ctx);
}
createChart(ctx: CanvasRenderingContext2D) {
if(!this.chartData)
return;
let data = {
labels: this.chartXAxisLabels,
datasets: [{
label: this.legendLabel,
data: this.chartData,
backgroundColor: ['rgba(54, 162, 235, 0.2)'],
borderColor: ['rgba(54, 162, 235, 1)'],
borderWidth: 1,
lineTension: 0, // set to 0 means - No bezier
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 2,
pointHitRadius: 10
}]
};
let chartOptions = {
legend: { display: this.showLegend !== undefined ? this.showLegend : false },
responsive: true,
maintainAspectRatio: true,
scales: { yAxes: [{ ticks: { beginAtZero: true } }] }
};
//next line is no more complaining about "Supplied parameters..."
this.chart = new Chart(ctx, { type: 'line', data: data, options: chartOptions });
}
}