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 });
}
}
Source: stackoverflow.com
Related Query
- chart.js - Supplied parameters do not match any signature of call target (angular2)
- Series Details Not Showing in Angular Chart with Charts.js
- Chart.js Chart in Angular does not load until resizing browser window
- Chart.js error: type lacks a call signature '((...items: number[]) => number) | ((...items: ChartPoint[]) => number)' in Angular
- chart annotations not showing in Angular 2
- Css style not working well when resizing chart height in angular application
- Adding object data to data structure of chart.js chart does not show any data
- Chart.js in Angular 10: Specified colors not shown in multi-series bar chart (instead random colors)
- Doughnut chart from Chart.js, custom legend and call of original handler not works as expected
- $scope variable do not respond to the onClick function of angular chart
- Angular + Ng2 Charts: Chart not displaying as Child Component
- angular 4 line chart data is not showing data from http get
- ChartJs does not render chart when binding canvas id in Angular
- Chart is not populating when getting the data from AJAX call
- Reproduce Error in Chartjs v2 Polar chart not plotting all supplied data
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- The real time chart sometimes does not display when I switch the target
- Angular Chart Js legends click event not working
- Trying to call API and plot a line chart but it does not show
- Pie chart not working using angular and ng2-charts
- ReferenceError: Chart is not defined with primeNg and angular 4
- angular-chart.js not rendering any chart
- angular chart js type line setting chart-options not working
- Angular Chart color does not change
- Angular Chart.js not displaying Chart (Legend is Displaying)
- The data that is called in chart does not match the database
- how to not repeat code while creating multiple charts in chart js
- Chart in Angular not displayed until windows resize
- Custom dataset object not setting chart.js bar chart colors in Angular 6
More Query from same tag
- How does one represent multiple threads in a structure/flowchart
- Multiple canvas, reusable gradients
- How to create pdf file in node js
- How to change background color of labels in line chart from chart.js?
- Many Flots using ChartJS and Ajax get data values
- How to mutate VueJS prop?
- How to display small numbers in chart js tooltip?
- Array value is not being passed to the plugin
- Query result into array in Laravel 6
- Don't show label tooltip in Chart.js if hover is less than 1 second
- How to loop over Chart.js with Django list view
- Displaying Legend only once when Several pie charts are drawn in the same page using chart.js
- How to display multiple graphs in real time with chartjs
- Chartjs pie chart tooltip mode label
- Are we able to position the y axis in the center of the x axis?
- Chart JS: Set Spacing Between Ticks on Y-Axis
- Empty circle - only point strok in line chart for ChartJS
- How to change z-index of chart js tooltip?
- Second dataset with single point makes y axis too big on Chart.js
- ChartJS adding 3yAxes
- Force display of ticks on xAxes using chartkick gem and chart.js
- How to draw a chart with Chart.JS?
- Change the color of displayed values in pie chart
- chartjs chart.update() function not rendering lines in foreground
- Typescript types for chartjs-adapter-date-fns
- How to call back one js file from another js file?
- Where put "multiTooltipTemplate" in Chart.js v2.x
- chartjs: How to remove specific label
- How can I implement Polar area charts with Chart.js and Canvas
- How to use Utils from Chartjs on Django