ngx-charts: wrong context of AxisTickFormatting methods

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

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-value-history',
  template: `
    <ngx-charts-line-chart
      [xAxisTickFormatting]="xAxisTickFormatting"
    </ngx-charts-line-chart>
  `
})
export class ValueHistoryComponent {

   // ...
  constructor(private datePipe: DatePipe) { }

  xAxisTickFormatting(value) {
    return this.datePipe.transform(value, 'short');
  }
}

throws an error:

TypeError: Cannot read property 'transform' of undefined
    at XAxisTicksComponent.webpackJsonp.479.ValueHistoryComponent.xAxisTickFormatting (value-history.component.ts:60)

because the this in the formatting function seems to be the internal xAxisTickComponent

Expected behavior i expect to be able to use the injected datePipe in the AxisTickFormatting function

Reproduction of the problem see example above

What is the motivation / use case for changing the behavior? i want to use angular2 LOCALE_ID to format the date for various countries

Please tell us about your environment: OSX / Webstorm

ngx-charts version: 4.2.0
Angular version: 4.0.0-rc0 (ng-cli 1.0.0-rc.0)
Browser: all
Language: Typescript -> es5

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 17 (4 by maintainers)

Most upvoted comments

[xAxisTickFormatting]="xFormat" // in your template guys just simple declare function like this:

 xFormat = (e) => {
   // where e - value of tick by default
   // console.log(this);
   // now you have access to your component variables
   return e + this.someVariable
 }

+33

shmarlya on Jun 21, 2018

@rutemja you need to do it in your component: public xAxisTickFormattingFn = this.xAxisTickFormatting.bind(this);

Then just use xAxisTickFormattingFn in your template

+11

tariknz on May 27, 2018

You can change the context like this:

<ngx-charts-line-chart
    [xAxisTickFormatting]="xAxisTickFormatting.bind(this)"
</ngx-charts-line-chart>

marjan-georgiev on Jun 19, 2017

Hi,

The following workaround

<ngx-charts-line-chart
    [xAxisTickFormatting]="xAxisTickFormatting.bind(this)"
</ngx-charts-line-chart>

is not working for me. Will this issue reopen and further investigate?

kitloong on Jan 4, 2018

@marjan-georgiev It seems that, when using the “bind” syntax, it makes the tooltipTemplate not showing anymore. Some kind of a conflict b/w the two. Can you refer to that?

eshcharc on Jun 19, 2017