score:0

Accepted answer

to resolve the problem listed in question:


q:
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.


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 });
    }  
}

Related Query

More Query from same tag