Angular2-chartjs i am unable to use selector as my html tag in my project

[jyotsnaa]

I am new to angular i have to make a chart so i am using Angular2-chartjs in my project and try made one example but in intially i got so many errors. And the major issue is that i am unable to use the component's selector as html tag, it give me the error.

[emn178]

Please provide more information, and you can refer to this sample

[cpilson]

Are you using angular-seed or another SystemJS-based installation, @jyotsnaa ?

If so, and if you're using angular-seed, you'll need to head over to mgetchev's (I think that's the name) Wiki and see how to add external dependencies. This worked out for me.

(And of course, make sure you've run npm install in the interim! ;) )

[jyotsnaa]

Hi, Thanks .. It was the configuration mistak. I forget to add the import on module. Now i have to ask can i have more than one chart on a page, if yes than how will i render it. As the type and data is the only var and how html chart will make them distinct on two other charts. And if i have want to use backend data code to render the chart, Rather than write it on ts file How will i do that.

[jyotsnaa]

Hey, I am using
component.html

{{title}}

<chart [type]='report.reporttypename' [data]='report.datasets' [options]='report.options'>

chart.js

var data = [ { reportId: 1, reporttypeId: 2, reporttypename: 'Bar', labels: '["Africa", "Asia", "Europe", "Latin America", "North America"]', datasets: '[{"label":"Population (millions)","backgroundColor":["#3e95cd","#8e5ea2","#3cba9f","#e8c3b9","#c45850"],"data":[2478,5267,734,784,433]}]', options: '{"legend":{"display":false},"title":{"display":true,"text":"Predicted world population (millions) in 2050"}}', series: '' }, { reportId: 1, reporttypeId: 1, reporttypename: 'Line', labels: '[1500,1600,1700,1750,1800,1850,1900,1950,1999,2050]', datasets: '[{"data":[86,114,106,106,107,111,133,221,783,2478],"label":"Africa","borderColor":"#3e95cd","fill":false},{"data":[282,350,411,502,635,809,947,1402,3700,5267],"label":"Asia","borderColor":"#8e5ea2","fill":false},{"data":[168,170,178,190,203,276,408,547,675,734],"label":"Europe","borderColor":"#3cba9f","fill":false},{"data":[40,20,10,16,24,38,74,167,508,784],"label":"Latin America","borderColor":"#e8c3b9","fill":false},{"data":[6,3,2,2,7,26,82,172,312,433],"label":"North America","borderColor":"#c45850","fill":false}]', options: '{"title":{"display":true,"text":"World population per region (in millions)"}}', series: '' } ];

But it is giving me the error AdminreportsComponent.html:5 ERROR TypeError: Cannot create property 'datasets' on string '[{"data":[86,114,106,106,107,111,133,221,783,2478],"label":"Africa","borderColor":"#3e95cd","fill":false},{"data":[282,350,411,502,635,809,947,1402,3700,5267],"label":"Asia","borderColor":"#8e5ea2","fill":false},{"data":[168,170,178,190,203,276,408,547,675,734],"label":"Europe","borderColor":"#3cba9f","fill":false},{"data":[40,20,10,16,24,38,74,167,508,784],"label":"Latin America","borderColor":"#e8c3b9","fill":false},{"data":[6,3,2,2,7,26,82,172,312,433],"label":"North America","borderColor":"#c45850","fill":false}]' at initConfig (core.controller.js:31) at Chart.construct (core.controller.js:77) at new Chart (core.js:42) at chart.component.js:38 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:3648) at ChartComponent.push../node_modules/angular2-chartjs/dist/chart.component.js.ChartComponent.create (chart.component.js:32) at ChartComponent.push../node_modules/angular2-chartjs/dist/chart.component.js.ChartComponent.ngOnInit (chart.component.js:13) at checkAndUpdateDirectiveInline (core.js:8981)