Can't bind to 'chart' since it isn't a known property of 'div' about angular-highcharts

[SarraMrbt]

import ChartModule in your Module

[remster85]

Resolution is

// app.module.ts
import { ChartModule } from 'angular-highcharts';
 
@NgModule({
  imports: [
    ChartModule // add ChartModule to your imports
  ]
})
export class AppModule {}

as described in https://www.npmjs.com/package/angular-highcharts#usage-example

[cebor]

Do you import and bind ChartModule ?

[clsatw]

i got the same problem. can anyone help please.

[jyotiranjankalta81]

I just installed angular-highcharts and highcharts, did everything that was documented to start basic chart. But I ma getting this error:

Uncaught Error: Template parse errors:
Can't bind to 'chart' since it isn't a known property of 'div'. ("
  <button (click)="add()">Add Point!</button>
  <div [ERROR ->][chart]="chart"></div>
  "): ng:///EDLModule/EDLComponent.html@2:7
    at syntaxError (compiler.es5.js:1694)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12937)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:27133)
    at compiler.es5.js:27052
    at Set.forEach (<anonymous>)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:27052)
    at compiler.es5.js:26939
    at Object.then (compiler.es5.js:1683)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26938)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26867)

below is my component:

import { Chart } from 'angular-highcharts';

@Component({
  selector: 'app-edl',
  template: `
  <button (click)="add()">Add Point!</button>
  <div [chart]="chart"></div>
  `
  
})
export class EDLComponent extends BaseWidget {
   /**
   * testing highcharts here
   */
  chart = new Chart({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Linechart'
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Line 1',
      data: [1, 2, 3]
    }]
  });

// add point to chart serie
  add() {
    this.chart.addPoint(Math.floor(Math.random() * 10));
  }
}

ERROR in src/app/modules/checklist/checklist.component.html:58:10 - error NG8002: Can't bind to 'chart' since it isn't a known property of 'div'.

58     <div [chart]="chart"></div>
            ~~~~~~~~~~~~~~~

  src/app/modules/checklist/checklist.component.ts:34:16
    34   templateUrl: './checklist.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ChecklistComponent.

[Janatbek]

I got it working, but show me your code. you can push your code to github, open an issue on your code. and share with me

[clsatw]

Hi Janatbek,
Here are my code:

<button ion-button (click)="add()">Add Point!</button>
<div [chart]="chart"></div>

import { NgModule, Component } from '@angular/core';
import { AngularFireList } from 'angularfire2/database';
import { Chart } from 'angular-highcharts';
// import {FirebaseProvider} from '/providers/firebase/firebase.ts';
import { Observable } from 'rxjs/Observable';
import { FirebaseProvider } from '../../providers/firebase/firebase';
import { DhtLog } from '../../app/shared/dhtlog.model';

/**
 * Generated class for the Dth11ListComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'dht11-list',
  templateUrl: 'dht11-list.html'
})
export class Dht11ListComponent {
  dhtLogs$: Observable<DhtLog[]>;
  dhtLogList: AngularFireList<DhtLog>;
  // chart: Chart;
  chart = new Chart({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Linechart'
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Line 1',
      data: [1, 2, 3]
    }]
  }); 
  add() {
    this.chart.addPoint(Math.floor(Math.random() * 10));
  }

  constructor(private dhtLogSvc: FirebaseProvider) {
    console.log('ionViewDidLoad Log component');
    this.dhtLogs$ = this.dhtLogSvc.getDhtData();   
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Log component');
    let x = this.dhtLogSvc.getData(); 
  }
}

thank you.

[clsatw]

basically my code is exactly the same as yours.

[Janatbek]

did you figure it out? if not I can help today.

On Mon, Dec 11, 2017 at 1:28 AM Felix Itzenplitz ***@***.***> wrote: Do you import and bind ChartModule ? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#69 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/APhnHdttMmCxqJkGtQclu0R_PB1mWFthks5s_OeXgaJpZM4PzDSD> .

-- [image: Bravo Web] <http://www.kyrgyzclub.org/> Janatbek Sharsheyev / Software Engineer (424) 346- 4564 Micron Technologies <http://micron.com> [image: Twitter] <https://twitter.com/Janatbek> [image: Facebook] <https://www.facebook.com/janatbek> [image: LinkedIn] <https://www.linkedin.com/in/janatbek-sharsheyev-b8772bab> [image: Skype] <https://htmlsig.com/skype?username=janatbek2> [image: Github] <https://github.com/Janatbek>

[clsatw]

Thank you Janatbek. It has been resolved. From: Janatbek Sharsheyev [mailto:[email protected]] Sent: Tuesday, December 12, 2017 5:34 PM To: cebor/angular-highcharts Cc: Mark Huang, CLST; Comment Subject: Re: [cebor/angular-highcharts] Can't bind to 'chart' since it isn't a known property of 'div' (#69) did you figure it out? if not I can help today.

On Mon, Dec 11, 2017 at 1:28 AM Felix Itzenplitz ***@***.******@***.***>> wrote: Do you import and bind ChartModule ? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#69 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/APhnHdttMmCxqJkGtQclu0R_PB1mWFthks5s_OeXgaJpZM4PzDSD> .

-- [image: Bravo Web] <http://www.kyrgyzclub.org/> Janatbek Sharsheyev / Software Engineer (424) 346- 4564 Micron Technologies <http://micron.com> [image: Twitter] <https://twitter.com/Janatbek> [image: Facebook] <https://www.facebook.com/janatbek> [image: LinkedIn] <https://www.linkedin.com/in/janatbek-sharsheyev-b8772bab> [image: Skype] <https://htmlsig.com/skype?username=janatbek2> [image: Github] <https://github.com/Janatbek> — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#69 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AIZSqQa7XWLowR7B8gR92N-Jo_kGbM2uks5s_kiZgaJpZM4PzDSD>. Legal and Regulatory Notices (Electronic Communications) © 2016 CL Securities Taiwan Company Limited. This communication is only for the use of the intended recipient and may contain information which is confidential, privileged or subject to copyright. If you are not the intended recipient, you should not read, disseminate, distribute or copy this message. If you are not the intended recipient, please destroy it.　 No liability is accepted for this message. Electronic communications may contain computer viruses, and may also be intercepted, corrupted or delayed. CL Securities Taiwan Company Limited ("CLST") does not accept any liability for electronic communications that have been altered in the course of delivery or that have not been delivered in a timely manner. By communicating with CLST through electronic communications you are taken to have accepted these risks. Neither this communication nor any portion hereof may be reprinted, sold or redistributed without the written consent of CLST. CLST has produced this communication for private circulation to professional, institutional and/or wholesale clients only. The information, opinions and estimates herein are not directed at, or intended for distribution to or use by, any person or entity in any jurisdiction where doing so would be contrary to law or regulation or which would subject CLST to any additional registration or licensing requirement within such jurisdiction. The information and statistical data herein have been obtained from sources we believe to be reliable. Such information has not been independently verified and we make no representation or warranty as to its accuracy, completeness or correctness. Any opinions or estimates herein reflect the judgment of CLST at the date of this communication and are subject to change at any time without notice. Where any part of the information, opinions or estimates contained herein reflects the views and opinions of a sales person or a non-analyst, such views and opinions may not correspond to the published view of the CLST research group. This message is information only and is not an offer or solicitation to buy / sell any instruments or services. It may not be accurate or complete and is subject to change. The information contained in this communication is for information purposes only and does not constitute any recommendation, representation, warranty or guarantee of performance. Any price target given in the report may be projected from one or more valuation models and hence any price target may be subject to the inherent risk of the selected model as well as other external risk factors. This is not intended to provide professional, investment or any other type of advice or recommendation and does not take into account the particular investment objectives, financial situation or needs of individual recipients. Before acting on any information in this communication, you should consider whether it is suitable for your particular circumstances and, if appropriate, seek professional advice, including professional legal, financial and tax advice. CLST does not accept any responsibility and cannot be held liable for any person's use of or reliance on the information and opinions contained herein. To the extent permitted by applicable securities laws and regulations, CLST accepts no liability whatsoever for any direct or consequential loss arising from the use of this communication or its contents. Where the publication does not contain ratings, the material should not be construed as research but is offered as factual commentary. It is not intended to, nor should it be used to form an investment opinion about the not rated companies. Subject to any applicable laws and regulations at any given time CLST, its affiliates or companies or individuals connected with CLST may have used the information contained herein before communication and may have positions in, may from time to time purchase or sell or may have a material interest in any of the securities mentioned or related securities or may currently or in the future have or have had a relationship with, or may provide or have provided investment banking, capital markets and/or other services to, the entities referred to herein, their advisors and/or any other connected parties.

[clsatw]

I ended up using Highcharts instead of angular-highcharts. HighCharts.chart(‘container’, { chart:{ type: ‘spline’, }, title: { text: ‘dht11’ }, …. }); <div id=’container’ style=’display:block;’></div> From: Farid [mailto:[email protected]] Sent: Saturday, December 16, 2017 9:54 PM To: cebor/angular-highcharts Cc: Mark Huang, CLST; Comment Subject: Re: [cebor/angular-highcharts] Can't bind to 'chart' since it isn't a known property of 'div' (#69) What was the issue here? Can you please share your resolution? Thank you — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#69 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AIZSqT8-ExpuEKGDK9Yxd1bLAQYBjf3zks5tA8uEgaJpZM4PzDSD>. Legal and Regulatory Notices (Electronic Communications) © 2016 CL Securities Taiwan Company Limited. This communication is only for the use of the intended recipient and may contain information which is confidential, privileged or subject to copyright. If you are not the intended recipient, you should not read, disseminate, distribute or copy this message. If you are not the intended recipient, please destroy it.　 No liability is accepted for this message. Electronic communications may contain computer viruses, and may also be intercepted, corrupted or delayed. CL Securities Taiwan Company Limited ("CLST") does not accept any liability for electronic communications that have been altered in the course of delivery or that have not been delivered in a timely manner. By communicating with CLST through electronic communications you are taken to have accepted these risks. Neither this communication nor any portion hereof may be reprinted, sold or redistributed without the written consent of CLST. CLST has produced this communication for private circulation to professional, institutional and/or wholesale clients only. The information, opinions and estimates herein are not directed at, or intended for distribution to or use by, any person or entity in any jurisdiction where doing so would be contrary to law or regulation or which would subject CLST to any additional registration or licensing requirement within such jurisdiction. The information and statistical data herein have been obtained from sources we believe to be reliable. Such information has not been independently verified and we make no representation or warranty as to its accuracy, completeness or correctness. Any opinions or estimates herein reflect the judgment of CLST at the date of this communication and are subject to change at any time without notice. Where any part of the information, opinions or estimates contained herein reflects the views and opinions of a sales person or a non-analyst, such views and opinions may not correspond to the published view of the CLST research group. This message is information only and is not an offer or solicitation to buy / sell any instruments or services. It may not be accurate or complete and is subject to change. The information contained in this communication is for information purposes only and does not constitute any recommendation, representation, warranty or guarantee of performance. Any price target given in the report may be projected from one or more valuation models and hence any price target may be subject to the inherent risk of the selected model as well as other external risk factors. This is not intended to provide professional, investment or any other type of advice or recommendation and does not take into account the particular investment objectives, financial situation or needs of individual recipients. Before acting on any information in this communication, you should consider whether it is suitable for your particular circumstances and, if appropriate, seek professional advice, including professional legal, financial and tax advice. CLST does not accept any responsibility and cannot be held liable for any person's use of or reliance on the information and opinions contained herein. To the extent permitted by applicable securities laws and regulations, CLST accepts no liability whatsoever for any direct or consequential loss arising from the use of this communication or its contents. Where the publication does not contain ratings, the material should not be construed as research but is offered as factual commentary. It is not intended to, nor should it be used to form an investment opinion about the not rated companies. Subject to any applicable laws and regulations at any given time CLST, its affiliates or companies or individuals connected with CLST may have used the information contained herein before communication and may have positions in, may from time to time purchase or sell or may have a material interest in any of the securities mentioned or related securities or may currently or in the future have or have had a relationship with, or may provide or have provided investment banking, capital markets and/or other services to, the entities referred to herein, their advisors and/or any other connected parties.

[clsatw]

Thanks everyone and wish you all the best for the holiday season. From: Mark Huang, CLST Sent: Monday, December 18, 2017 8:35 AM To: 'cebor/angular-highcharts'; cebor/angular-highcharts Cc: Comment Subject: RE: [cebor/angular-highcharts] Can't bind to 'chart' since it isn't a known property of 'div' (#69) I ended up using Highcharts instead of angular-highcharts. HighCharts.chart(‘container’, { chart:{ type: ‘spline’, }, title: { text: ‘dht11’ }, …. }); <div id=’container’ style=’display:block;’></div> From: Farid [mailto:[email protected]] Sent: Saturday, December 16, 2017 9:54 PM To: cebor/angular-highcharts Cc: Mark Huang, CLST; Comment Subject: Re: [cebor/angular-highcharts] Can't bind to 'chart' since it isn't a known property of 'div' (#69) What was the issue here? Can you please share your resolution? Thank you — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#69 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AIZSqT8-ExpuEKGDK9Yxd1bLAQYBjf3zks5tA8uEgaJpZM4PzDSD>. Legal and Regulatory Notices (Electronic Communications) © 2016 CL Securities Taiwan Company Limited. This communication is only for the use of the intended recipient and may contain information which is confidential, privileged or subject to copyright. If you are not the intended recipient, you should not read, disseminate, distribute or copy this message. If you are not the intended recipient, please destroy it.　 No liability is accepted for this message. Electronic communications may contain computer viruses, and may also be intercepted, corrupted or delayed. CL Securities Taiwan Company Limited ("CLST") does not accept any liability for electronic communications that have been altered in the course of delivery or that have not been delivered in a timely manner. By communicating with CLST through electronic communications you are taken to have accepted these risks. Neither this communication nor any portion hereof may be reprinted, sold or redistributed without the written consent of CLST. CLST has produced this communication for private circulation to professional, institutional and/or wholesale clients only. The information, opinions and estimates herein are not directed at, or intended for distribution to or use by, any person or entity in any jurisdiction where doing so would be contrary to law or regulation or which would subject CLST to any additional registration or licensing requirement within such jurisdiction. The information and statistical data herein have been obtained from sources we believe to be reliable. Such information has not been independently verified and we make no representation or warranty as to its accuracy, completeness or correctness. Any opinions or estimates herein reflect the judgment of CLST at the date of this communication and are subject to change at any time without notice. Where any part of the information, opinions or estimates contained herein reflects the views and opinions of a sales person or a non-analyst, such views and opinions may not correspond to the published view of the CLST research group. This message is information only and is not an offer or solicitation to buy / sell any instruments or services. It may not be accurate or complete and is subject to change. The information contained in this communication is for information purposes only and does not constitute any recommendation, representation, warranty or guarantee of performance. Any price target given in the report may be projected from one or more valuation models and hence any price target may be subject to the inherent risk of the selected model as well as other external risk factors. This is not intended to provide professional, investment or any other type of advice or recommendation and does not take into account the particular investment objectives, financial situation or needs of individual recipients. Before acting on any information in this communication, you should consider whether it is suitable for your particular circumstances and, if appropriate, seek professional advice, including professional legal, financial and tax advice. CLST does not accept any responsibility and cannot be held liable for any person's use of or reliance on the information and opinions contained herein. To the extent permitted by applicable securities laws and regulations, CLST accepts no liability whatsoever for any direct or consequential loss arising from the use of this communication or its contents. Where the publication does not contain ratings, the material should not be construed as research but is offered as factual commentary. It is not intended to, nor should it be used to form an investment opinion about the not rated companies. Subject to any applicable laws and regulations at any given time CLST, its affiliates or companies or individuals connected with CLST may have used the information contained herein before communication and may have positions in, may from time to time purchase or sell or may have a material interest in any of the securities mentioned or related securities or may currently or in the future have or have had a relationship with, or may provide or have provided investment banking, capital markets and/or other services to, the entities referred to herein, their advisors and/or any other connected parties.