Search code examples
d3.jsvega-litevegaobservablehq

How to set time axes labels (ticks) based on German locale

What is the proper way to set time axes labels based a new (German) locale?

I would like to use it with the vega lite API.

Here is what I tried:

vl1 = {
  embed.vega.timeFormatLocale(locale); // show dates in German 
  embed.vega.formatLocale(locale); // show numbers with German groupings/ separators
  const plot = vl.markBar()
    .config({padding: {"left": 5, "top": 10, "right": 50, "bottom": 40}}) // now tooltip will not be clipped
    .data(cdata_lk_vl)
    .encode(
      vl.x().fieldT('Datum').axis({"format": "%d. %B"}),
      vl.y().fieldQ('infizierte Personen'),
      vl.tooltip([ 
        {"field": "Datum", "type": "temporal", "format": "%d. %B"}, // now date will be shown formatted
        {"field": 'infizierte Personen', "type": "quantitative", "format": ","},          
        ]))
  
   return plot.render();
}
  1. I created an observable: https://observablehq.com/@ee2dev/coronavirus-in-bayern-teil-2 with the cell vl1 showing the diagram I wanted to reflect locale formats. Based on a suggestion from the observable forum https://talk.observablehq.com/t/changing-the-locale-for-vega-lite/3010 I implement this:

This seems to work - sometimes !?. Over the last two months, there were days as today, when the format is switched back to the default US_EN

enter image description here

  1. The related question here How to set locale to show time with my language? doesn't seem to help in this case

I would really like to know, a) what is the proper way to do it and b) why does my solution sometimes work other times not (without me changing the code)

Solution

  • I sent you a suggestion on Observable, but I think the problem is because you were setting the locale on the vega instance you got from vegaEmbed. Instead, there's a vega instance on vl directly. I think often, depending on loading order, they're the exact same instance, but sometimes can be different.

    So you want:

      vl.vega.timeFormatLocale(locale); // show dates in German
  vl.vega.formatLocale(locale); // show numbers with German groupings/ separators