Ngx-charts: [ngx-charts-bar-vertical-2d]: xAxisTickFormatting -- data are "pre-formatted" before hitting this input.

[sjdemoor]

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 - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior
Note: This (probably) applies to all version of 'ngx-charts-bar-xxx' charts, but I haven't tested completely.

When sending Date() formatted data as the "name" (x-axis) field, the data are pre-formatted to a (non-localized) "MM/DD/YYYY" string. The pre-formatting overrides the (optional) [xAxisTickFormatting] input field.

Expected behavior
On the 'ngx-charts-line-chart', I am able to use the [xAxisTickFormatting] input to format date strings using localization (see code snippet below). This functionality does not work on the bar charts, because the ngx-charts-bar-xxxx components pre-format the (name) fields as "MM/DD/YYYY" prior to invoking the [xAxisTickFormatting] input.

// this is where I set chart options (in typescript), which are fed to the <ngx-charts-bar-xxx> input fields in the template.
this.chartOptions = {
...
xAxisTickFormatting: (val) => this.dateTickFormatting(val),
...
}

// typescript source for dateTickFormatting() function
  dateTickFormatting(val: any) {
    if (val instanceof Date) {
      return (<Date> val).toLocaleDateString(this.locale);
    } else {
      return val;
    }
  }

Reproduction of the problem
See code in previous section.

What is the motivation / use case for changing the behavior?
Need to be able to use localization for Dates. Functionality for (optional) input fields should be consistent between components. The 'ngx-charts-line-chart' exhibits the documented behavior.

Please tell us about your environment:
All OS and environments.

• ngx-charts version: 9.0.0

• Angular version: 6.1.3

• Browser:
  All browsers.

• Language:
  Typescript 2.7.2

[orestes]

I'm hitting this same bug right now.

"@swimlane/ngx-charts": "^12.0.1",
"@angular/core": "^8.2.13",

[alovega]

I am hitting the same bug with line-charts

"@swimlane/ngx-charts": "^13.0.2",
"@angular/core": "^8.2.14",

How can we solve it because am fetching my result from a django app thus the dates-value are coming as string here is a sample result

"data": [
        {
            "series": [
                {
                    "name": "2020-02-06T09:32:45.782Z",
                    "value": 1.0
                },
                {
                    "name": "2020-02-06T09:34:52.094Z",
                    "value": 0.0
                },
                {
                    "name": "2020-01-27T08:08:10.395Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-27T08:54:49.915Z",
                    "value": 0.0
                },
                {
                    "name": "2020-01-27T11:47:04.054Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-20T13:53:08.058Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-20T13:53:55.327Z",
                    "value": 1.0
                }
            ],
            "name": "Github"
        }
]

[alovega]

I got the answer, the dates in the key name need to be converted to javascript date format for it to be able to use the default tickFormatting function for dates. So I created A function that takes in an array of objects and convert all the dates in the key value name to javascript new date object.

dateConvert(value: []) {
    value.forEach((element: any) => {
      element.series.forEach((item: any) => {
        item.name = new Date(item.name);
      });
    });
  }

This for anyone who might get into the same bug or problem