How to change xAxisTickFormatting in ngx-charts-line-chart based on timeline selection?

Question

By default, ticks are formatted based on time range selection in timeline. If it pans across days it shows month and if it is with in a day, it shows only time. This is great!

Now I want to localize these ticks. I could provide xAxisTickFormatting to get this done but I want to have the formatting based on the time range selection. "MMM DD" or "HH:MM" based on the current time range selection.

For this I need to change the formatting function dynamically on time range selection event. Is there such an event? Or is there any other way to achieve this?

Answer 1

In your chart, among the other attributes, you can declare

<ngx-charts-bar-horizontal-normalized
    ...
    [xAxis]="true"
    [xAxisTickFormatting]='formatPercent'
    ...
</ngx-charts-bar-horizontal-normalized>

formatPercent is a function declared in your .ts file (I'm using Angular) written like

formatPercent(val) {
    if (val <= 100) {
      return val + '%';
    }
  } 

For any reference check the documentation here

Hope this helps.