Show Date-Values on X-Axis in locale depending format ngx-charts / d3

Question

I have a Webapp using Angular v4.0.1 and ngx-charts (uses d3) v5.1.2 creating a line-chart where the x-axis has date-values.

My Problem is that the x-axis does not show the german time-format. So I found out how I can set locale formatting for d3:

import * as d3 from "d3";

import * as formatDE from "d3-format/locale/de-DE.json";
import * as timeFormatDE from "d3-time-format/locale/de-DE.json";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    var formatBefore = d3.timeFormat("%A");
    console.log('Before: '+formatBefore(new Date));
    // output: Thursday -> OK

    d3.formatDefaultLocale(formatDE);
    d3.timeFormatDefaultLocale(timeFormatDE);

    var formatAfter = d3.timeFormat("%A");
    console.log('After: '+formatAfter(new Date));
    // output: Donnerstag -> YES, nice
  }
}

But this has now effect for the x-axis! The date and time-value are still in english format.

user_10622099 · Answer

I'm Using ngx-chart version 18.0.1 and charts have two attribute [xAxisTicks] and [yAxisTicks], they give data in any[] type and if you pass them data and that data matches with your chart data it will just show yAxisTicks Data.for Example in my project i needed to show xAxis just per days and didnt want to show them per hour and minute:

xAxisTicks: string[] = [];

 private addXAxis(xAxisValue: string) {
    if (this.xAxisTicks.find(xAxis => xAxis.slice(0, 10) === xAxisValue.slice(0, 10)) == undefined) {
      this.xAxisTicks.push(xAxisValue);
    }
  }

as you can see i just add some of the times into my array and because i use persian date i had to do this in that way

and here its the html

Show Date-Values on X-Axis in locale depending format ngx-charts / d3

2 Answers