How can I localize time scale labels?

[AntDavidLima]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Question

Fist of all, thanks for this library, it is helping me a lot.

I implemented the Pan and Zoom example combined with Brushing from Victory guides, and almost everything works perfectly, one of the major problems I'm having, is localizing the time scale to pt-BR. I know I can use the tickFormat property from VictoryAxis to format the labels as I wish, but the way it works without passing a tickFormat fuction is ideal to me, I want my chart to show bigger time scales when zoomed out, like 2002, 2004, 2006... And show smaller time scales when zoomed in, like Nov 15, Dec 1, Dec 15... And thats how it works now, the only problem to me, is that it is localized in en-US, and I don't really know how to implement this kind of formmating manually with the same accuracy, is there any way to provide a localization to the chart? Or can you assist me on how to implement this formatting so I can reproduce it on my tickFormat?

Thanks in advance for your time.

[haneetsingh]

Localization guide can be referenced here https://commerce.nearform.com/open-source/victory/docs/guides/localization

[AntDavidLima]

Tthis doesn't solve my problem, by providing a tick formatter for the axis, the dates will always have the same format, and the functionality I want to maintain is precisely the change of the date format depending on how zoomed in the graph is.

In the example of Pan and Zoom combined with Brushing in the documentation, without zooming, the labels are just the years, but as you zoom, the labels become more specific, showing the months, the days and depending on the data even the hours, and I can't see how to replicate this using just the tick format.

[haneetsingh]

You can achieve dynamic date formatting based on zoom levels by using a function like this:

const getTickFormat = () => {
  const [start, end] = zoomDomain.x;
  const rangeInDays = (end - start) / (1000 * 60 * 60 * 24);

  if (rangeInDays > 365) {
    return (t) => new Intl.DateTimeFormat("pt-BR", { year: "numeric" }).format(t);
  } else if (rangeInDays > 30) {
    return (t) => new Intl.DateTimeFormat("pt-BR", { month: "short", year: "numeric" }).format(t);
  } else {
    return (t) => new Intl.DateTimeFormat("pt-BR", { day: "2-digit", month: "short" }).format(t);
  }
};

and then using it with axis like

<VictoryAxis tickFormat={getTickFormat()} />

This function updates the date format dynamically as the zoom level changes, mimicking the behaviour in the Pan and Zoom example from the documentation.

Here is a demo with working example: https://codesandbox.io/p/sandbox/victory-axis-label-zoom-ytfp46