How to format time scale to 24 hours using timeFormatDefaultLocale

[matsomo]

I'm trying to format the time scale to 24 hours using the example given here

The 12 hours format is still used when I set the time format to "%H:%M:%S" or "%X" using timeFormatDefaultLocale, but I'm able to change the periods, days and months tags which at least tells me the config is read.

Here's an example showing my issue:

Am I doing something wrong here? Any clarification is appreciated

[classicmatsuo]

@matsomo try this:

updated the function name and import "timeFormatLocale" to "timeFormatDefaultLocale" the x-axis is now reflecting your formatting choices

[matsomo]

@classicmatsuo

Hey thanks for the response. The x-axis in your example isn't showing, and formatting the x value directly in my own project didn't change anything.

Is there really no way of overwriting the default time formatting with a config like shown in the react-vis documentation?

[classicmatsuo]

@matsomo the x-axis is showing up for me on chrome Version 78.0.3904.108 (Official Build) (64-bit). what browser/env are you using?

if you want to update just the x-axis tickFormat time to %H:%M:%S", take a look at this one:

[matsomo]

@classicmatsuo I can see the x-axis on chrome version 79.0.3945.88 (Official Build) (64-bit) if I overwrite the config using either timeFormatLocale or timeFormatDefaultLocale. What I meant was that the x-axis didn't show in your original example where you stored you output of timeFormatLocale and used it to format MSEC_DAILY dierctly:

const locale = timeFormatLocale({
  dateTime: "%a %e %b %X %Y",
  date: "%d/%m/%Y",
  time: "%H:%M:%S",
...
}

const MSEC_DAILY = locale.format(86400000);

The chart I'm working on needs to be able to scale it's time scale according to a datepicker where the span can be either year, month, week or day. Changing the datepicker will increase the distance in time between the first and last datapoint given to the chart and so I really need to just overwrite the default d3-scale formatting and let d3 do it's magic.

I should have clarified this earlier, sorry about that.

[classicmatsuo]

@matsomo the above codesandbox has a multiformat function that will change the tickmarks depending on what you pass into the LineSeries data. you can comment out MSEC_DAILY and try out MSEC_WEEKLY or MSEC_MONTHLY to see how the tickmarks scale hope this helps point you in the right direction