Change axes months language

I’m submitting a … (check one with “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

Hi, I’m working with ngx-charts, I get a JSON with a structure similar to this one:

[
  {
    "name": "Réunion",
    "series": [
      {
        "value": 4500,
        "name": "2016-09-17T09:08:09.631Z"
      },
      {
        "value": 6193,
        "name": "2016-09-19T15:58:09.930Z"
      },
      {
        "value": 4003,
        "name": "2016-09-19T07:59:57.198Z"
      },
      {
        "value": 6137,
        "name": "2016-09-17T16:12:09.567Z"
      },
      {
        "value": 4178,
        "name": "2016-09-13T12:24:55.620Z"
      }
    ]
  },
  {
    "name": "Réunion",
    "series": [
      {
        "value": 4905,
        "name": "2016-09-17T09:08:09.631Z"
      },
      {
        "value": 4014,
        "name": "2016-09-19T15:58:09.930Z"
      },
      {
        "value": 6364,
        "name": "2016-09-19T07:59:57.198Z"
      },
      {
        "value": 5178,
        "name": "2016-09-17T16:12:09.567Z"
      },
      {
        "value": 5943,
        "name": "2016-09-13T12:24:55.620Z"
      }
    ]
  },
  {
    "name": "Chile",
    "series": [
      {
        "value": 5591,
        "name": "2016-09-17T09:08:09.631Z"
      },
      {
        "value": 3054,
        "name": "2016-09-19T15:58:09.930Z"
      },
      {
        "value": 3881,
        "name": "2016-09-19T07:59:57.198Z"
      },
      {
        "value": 3528,
        "name": "2016-09-17T16:12:09.567Z"
      },
      {
        "value": 2314,
        "name": "2016-09-13T12:24:55.620Z"
      }
    ]
  },
  {
    "name": "Suriname",
    "series": [
      {
        "value": 5628,
        "name": "2016-09-17T09:08:09.631Z"
      },
      {
        "value": 6187,
        "name": "2016-09-19T15:58:09.930Z"
      },
      {
        "value": 5970,
        "name": "2016-09-19T07:59:57.198Z"
      },
      {
        "value": 4305,
        "name": "2016-09-17T16:12:09.567Z"
      },
      {
        "value": 2944,
        "name": "2016-09-13T12:24:55.620Z"
      }
    ]
  },
  {
    "name": "Senegal",
    "series": [
      {
        "value": 3874,
        "name": "2016-09-17T09:08:09.631Z"
      },
      {
        "value": 6686,
        "name": "2016-09-19T15:58:09.930Z"
      },
      {
        "value": 4061,
        "name": "2016-09-19T07:59:57.198Z"
      },
      {
        "value": 6735,
        "name": "2016-09-17T16:12:09.567Z"
      },
      {
        "value": 4148,
        "name": "2016-09-13T12:24:55.620Z"
      }
    ]
  }
]

to make the transformation I use the following code:

this.data = this.multi.map(group => {
          group.series = group.series.map(dataItem => {
            // dataItem.name = moment(dataItem.name).format('llll');
            dataItem.name = new Date(dataItem.name);
 
            return dataItem;

          });

          return group;


        });

My problem is that the lower bar of the X axis appear in English and I would like to change the language. How could I do this without losing the timeline?

[dlehmann]

You can use ngx-translate to translate your x-axis ticks.

In your component.html:

<ngx-charts-line-chart
    [xAxisTickFormatting]="translate"
</ngx-charts-line-chart>

In your component.ts:

// ...

constructor(
    private translateService: TranslateService
){}

// ...

translate = (value) => {
    return this.translateService.instant(value);
}

// ...

[Mikilll94]

Unfortunately the language is harcoded in app.component.ts in this line:

const monthName = new Intl.DateTimeFormat('en-us', { month: 'short' });