Vega-Lite : formatage français des dates et des nombres

Vega-Lite permet de convertir l’affichage des dates et des nombres en français en s’appuyant sur une locale adaptée.
En configurant correctement cette locale et en l’utilisant avec les formats appropriés, il est possible d’afficher :

• les mois et les jours en français,
• des dates lisibles (01 janvier 2025),
• des nombres conformes aux conventions françaises (11 951).

Voici les différents éléments de la spécification Vega-Lite qui permettent d’activer et de contrôler cet affichage.

1 : Définir une locale française

La première étape pour afficher des dates et des nombres en français consiste à définir une locale. Celle-ci décrit les règles linguistiques et typographiques à utiliser lors du formatage, comme les séparateurs numériques ou les noms des mois et des jours.

Dans Vega-Lite, la locale se définit dans la section config.locale de la spécification :

{
  "config": {
    "locale": {
      "number": {
        "decimal": ",",
        "thousands": "\u00a0",
        "grouping": [3],
        "currency": ["", "\u00a0€"],
        "percent": "\u202f%"
      },
      "time": {
        "days": [
          "dimanche", "lundi", "mardi",
          "mercredi", "jeudi", "vendredi", "samedi"
        ],
        "shortDays": [
          "dim.", "lun.", "mar.", "mer.",
          "jeu.", "ven.", "sam."
        ],
        "months": [
          "janvier", "février", "mars", "avril", "mai", "juin",
          "juillet", "août", "septembre", "octobre", "novembre", "décembre"
        ],
        "shortMonths": [
          "janv.", "févr.", "mars", "avr.", "mai", "juin",
          "juil.", "août", "sept.", "oct.", "nov.", "déc."
        ]
      }
    }
  }
}

Cette configuration indique à Vega-Lite :

• quel caractère utiliser comme séparateur décimal et de milliers,
• comment afficher les pourcentages et les monnaies,
• quels libellés utiliser pour les jours et les mois, en version longue ou abrégée.

Important : la locale ne déclenche pas l’affichage en français à elle seule. Elle définit uniquement comment formater les valeurs, mais pas quand ni où ce formatage doit être appliqué.

2 : Le rôle des types : temporal et quantitative

Pour que Vega-Lite puisse appliquer un formatage (et donc une traduction en français), il doit d’abord savoir comment interpréter les données.
Cette interprétation repose sur le type associé à chaque champ.

Deux types sont essentiels dans le cadre du formatage français :

• temporal pour les dates et les heures
• quantitative pour les valeurs numériques

Dates : utiliser le type temporal

Un champ de date doit impérativement être déclaré avec le type temporal.

{
  "field": "date",
  "type": "temporal"
}

Nombres : utiliser le type quantitative

De la même manière, un champ numérique doit être déclaré en quantitative pour bénéficier du formatage des nombres.

{
  "field": "value",
  "type": "quantitative"
}

La locale définit les règles linguistiques, mais le type active le bon moteur de formatage.
Sans temporal ou quantitative, Vega-Lite ne peut pas appliquer les conventions françaises, même si la locale est correctement définie.

3 : Le format : déclencher l’affichage en français

Une fois la locale définie et les types correctement renseignés, l’affichage en français repose sur un dernier élément essentiel : le format.

Le format indique à Vega-Lite comment afficher une valeur. C’est lui qui déclenche concrètement l’utilisation de la locale.

Format des dates

Les formats de dates utilisent une syntaxe spécifique, inspirée de d3-time-format. Par exemple, pour afficher une date sous la forme 01 janvier 2025 :

{
  "axis": {
    "format": "%d %B %Y"
  }
}

Dans ce format :

• %d correspond au jour du mois (01–31),
• %B correspond au nom du mois en toutes lettres,
• %Y correspond à l’année sur quatre chiffres.

Les noms de mois affichés (janvier, février, etc.) proviennent directement de la locale définie dans config.locale.time.months.

• Exemple :
  2025-01-01
  → 01 janvier 2025

Format des nombres

Le format des nombres repose sur une autre syntaxe, issue de d3-format. Pour activer l’affichage des milliers selon les conventions françaises :

{
  "format": ",d"
}

Ce format signifie :

• , : activer le groupement des milliers,
• d : afficher un entier.

Le caractère utilisé comme séparateur de milliers (espace insécable) est défini par la locale.

• VExemple :
  1250000
  → 1 250 000

Exemple d’affichage des dates avec une locale française

{
  "background": "transparent",
  "mark": {"type": "bar"},
  "transform": [{"calculate": "toDate(datum._id)", "as": "date"}],
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "title": "",
      "axis": {"labelAngle": 0, "format": "%d %B %Y"}
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "title": "",
      "axis": {"labelAngle": 0, "format": ",d"},
      "scale": {"type": "linear"}
    },
    "tooltip": [
      {
        "field": "date",
        "type": "temporal",
        "title": "Date",
        "format": "%d %B %Y"
      },
      {
        "field": "value",
        "type": "quantitative",
        "title": "Nombre",
        "format": ",d"
      }
    ]
  },
  "padding": 18,
  "width": "container",
  "height": "container",
  "autosize": {"type": "fit", "contains": "padding"},
  "config": {
    "view": {"strokeWidth": 0},
    "locale": {
      "number": {
        "decimal": ",",
        "thousands": " ",
        "grouping": [3],
        "currency": ["", " €"],
        "percent": " %"
      },
      "time": {
        "dateTime": "%A %e %B %Y, %X",
        "date": "%d/%m/%Y",
        "time": "%H:%M:%S",
        "periods": ["AM", "PM"],
        "days": [
          "dimanche",
          "lundi",
          "mardi",
          "mercredi",
          "jeudi",
          "vendredi",
          "samedi"
        ],
        "shortDays": ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
        "months": [
          "janvier",
          "février",
          "mars",
          "avril",
          "mai",
          "juin",
          "juillet",
          "août",
          "septembre",
          "octobre",
          "novembre",
          "décembre"
        ],
        "shortMonths": [
          "janv.",
          "févr.",
          "mars",
          "avr.",
          "mai",
          "juin",
          "juil.",
          "août",
          "sept.",
          "oct.",
          "nov.",
          "déc."
        ]
      }
    }
  },
  "data": {
    "values": [
      {"_id": "2025-06-04", "value": 3},
      {"_id": "2025-02-03", "value": 3},
      {"_id": "2025-05-06", "value": 3},
      {"_id": "2025-01-20", "value": 3},
      {"_id": "2025-08-14", "value": 3},
      {"_id": "2025-01-05", "value": 3},
      {"_id": "2025-03-01", "value": 3},
      {"_id": "2025-03-18", "value": 3},
      {"_id": "2025-06-21", "value": 3},
      {"_id": "2025-04-22", "value": 3},
      {"_id": "2025-05-19", "value": 3},
      {"_id": "2025-04-02", "value": 3},
      {"_id": "2025-02-15", "value": 3},
      {"_id": "2025-01-12", "value": 3},
      {"_id": "2025-07-03", "value": 3},
      {"_id": "2025-09-30", "value": 4}
    ]
  }
}

Exemple d’affichage des nombres avec une locale française

{
  "params": [
    {"name": "highlight", "select": {"type": "point", "on": "pointerover"}},
    {"name": "select", "select": "point", "value": null}
  ],
  "background": "transparent",
  "mark": {"type": "bar", "cursor": "pointer", "stroke": "black"},
  "encoding": {
    "x": {
      "field": "value",
      "type": "quantitative",
      "axis": {"labelAngle": 0, "tickMinStep": 1, "format": ",d"},
      "scale": {"type": "linear"},
      "title": "",
      "sort": null
    },
    "y": {
      "field": "_id",
      "type": "nominal",
      "axis": {"labelAngle": 0, "tickMinStep": 1},
      "title": "",
      "sort": null
    },
    "color": {
      "field": "_id",
      "scale": {"range": ["#AB8EE2"]},
      "type": "nominal",
      "legend": null
    },
    "fillOpacity": {
      "condition": [
        {"param": "select", "value": 1},
        {"param": "highlight", "empty": false, "value": 1}
      ],
      "value": 0.3
    },
    "strokeWidth": {
      "condition": [
        {"param": "select", "empty": false, "value": 2},
        {"param": "highlight", "empty": false, "value": 1}
      ],
      "value": 0
    },
    "tooltip": [
      {"field": "_id", "type": "nominal", "title": "Category"},
      {
        "field": "value",
        "type": "quantitative",
        "title": "Value",
        "format": ",d"
      }
    ]
  },
  "padding": 18,
  "width": "container",
  "height": {"step": "30"},
  "autosize": {"type": "fit", "contains": "padding"},
  "config": {
    "locale": {
      "number": {
        "decimal": ",",
        "thousands": " ",
        "grouping": [3],
        "currency": ["", " €"],
        "percent": " %"
      }
    },
    "view": {"strokeWidth": 0}
  },
  "data": {
    "values": [
      {"_id": "Astronomy & Astrophysics", "value": 1369},
      {
        "_id": "Monthly Notices of the Royal Astronomical Society",
        "value": 617
      },
      {"_id": "Advances in Space Research", "value": 79},
      {"_id": "EAS Publications Series", "value": 45},
      {"_id": "Planetary and Space Science", "value": 34},
      {"_id": "Astroparticle Physics", "value": 34},
      {"_id": "Astrophysics and Space Science", "value": 32},
      {"_id": "Space Weather", "value": 29},
      {"_id": "Astronomy and Astrophysics Supplement Series", "value": 27},
      {"_id": "Radio Science", "value": 26},
      {"_id": "Celestial Mechanics and Dynamical Astronomy", "value": 22},
      {"_id": "Classical and Quantum Gravity", "value": 20},
      {"_id": "Experimental Astronomy", "value": 20},
      {
        "_id": "Journal of Atmospheric and Solar-Terrestrial Physics",
        "value": 18
      },
      {"_id": "Vistas in Astronomy", "value": 16},
      {"_id": "New Astronomy Reviews", "value": 14},
      {"_id": "Space Science Reviews", "value": 13},
      {"_id": "New Astronomy", "value": 13},
      {"_id": "Solar Physics", "value": 11},
      {"_id": "Astronomische Nachrichten", "value": 10},
      {"_id": "Geochimica et Cosmochimica Acta", "value": 10}
    ]
  }
}