Ngx-charts: Can't bind to 'tooltipTemplate' since it isn't a known property of 'ngx-charts-line-chart'.

[krist-jin]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
Not able to use the input tooltipTemplate of ngx-charts-line-chart.
nhandled Promise rejection: Template parse errors:
Can't bind to 'tooltipTemplate' since it isn't a known property of 'ngx-charts-line-chart'.

1. If 'ngx-charts-line-chart' is an Angular component and it has 'tooltipTemplate' input, then verify that it is part of this module.
2. If 'ngx-charts-line-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   [yAxisLabel]="yAxisLabel"
   [autoScale]="autoScale"
   [ERROR ->][tooltipTemplate]='someTemplate'
   (select)="onSelect($event)">
   html@14:6 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:
   Can't bind to 'tooltipTemplate' since it isn't a known property of 'ngx-charts-line-chart'.
4. If 'ngx-charts-line-chart' is an Angular component and it has 'tooltipTemplate' input, then verify that it is part of this module.
5. If 'ngx-charts-line-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   [yAxisLabel]="yAxisLabel"
   [autoScale]="autoScale"
   [ERROR ->][tooltipTemplate]='someTemplate'
   (select)="onSelect($event)">
   html@14:6
   at ZoneAwareError (VM345 zone.js:917)
   at syntaxError (VM379 compiler.umd.js:1513)
   at TemplateParser.parse (VM379 compiler.umd.js:11522)
   at JitCompiler._compileTemplate (VM379 compiler.umd.js:25240)
   at eval (VM379 compiler.umd.js:25164)
   at Set.forEach ()
   at JitCompiler._compileComponents (VM379 compiler.umd.js:25164)
   at createResult (VM379 compiler.umd.js:25049)
   at ZoneDelegate.invoke (VM345 zone.js:365)
   at Zone.run (VM345 zone.js:125)
   at VM345 zone.js:760
   at ZoneDelegate.invokeTask (VM345 zone.js:398)
   at Zone.runTask (VM345 zone.js:165)
   at drainMicroTaskQueue (VM345 zone.js:593)
   at XMLHttpRequest.ZoneTask.invoke (VM345 zone.js:464) Error: Template parse errors:

Expected behavior
use tooltipTemplate to customize the tooptip

Reproduction of the problem
https://plnkr.co/edit/U7JE8d?p=preview

<ngx-charts-line-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      [tooltipTemplate]='someTemplate'
      (select)="onSelect($event)">
      <ng-template #someTemplate let-model="model">
          bla bla bla
      </ng-template>
    </ngx-charts-line-chart>

What is the motivation / use case for changing the behavior?
use tooltipTemplate to customize the tooptip

Please tell us about your environment:
see plunkar

• ngx-charts version: x.x.x
  latest

• Angular version: 2.x.x
  4.0.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[krist-jin]

ok I figure it out.

Seems I misunderstand the usage (maybe the doc should be more clear on this? I think it's not intuitive to use a 'input' like this).

Following codes works:

<ngx-charts-line-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      (select)="onSelect($event)">
      <ng-template #tooltipTemplate let-model="model">
          bla bla bla
      </ng-template>
    </ngx-charts-line-chart>

[henriquezago]

I did the exact same.
At the docs, you find the tooltipTemplate under the Inputs table along with results, scheme, schemeType... so that can be a little misleading.

I do think that the documentation needs more clarity. This section is under Examples, but there are no actual examples on the page.

Ref: https://swimlane.gitbook.io/ngx-charts/examples/line-area-charts/area-chart