Skip to main content
<dbn-dashboard
  token="guest-token"
  dashboard-id="dashboardId"
  translation-dictionary={JSON.stringify({
    'total sales': {
      en: 'total sales',
      fr: 'ventes totales',
      es: 'ventas totales',
      de: 'Gesamtumsatz',
      it: 'vendite totali',
      pt: 'vendas totais',
      zh: '总销售额',
      ja: '総売上',
      ko: '총 매출',
      hi: 'कुल बिक्री',
      ar: 'إجمالي المبيعات',
      ru: 'общие продажи',
    },
  })}
  language="fr"
/>

​
translation-dictionary Format

The translation-dictionary is a simple object where:
  • Each key matches the exact text you want to translate (e.g., metric title, subtitle, label).
  • Each value is an object with translations in various language codes (en, fr, es, etc.).
  • Longer and more descriptive keys should be placed first to ensure they’re matched before shorter or nested ones.
Example:
const translationDictionary = {
  "Total Sales and Total Profit by Category": {
    en: "Total Sales and Total Profit by Category",
    fr: "Ventes totales et bénéfices totaux par catégorie",
    de: "Gesamtumsatz und Gesamtgewinn nach Kategorie",
    // ...
  },
  "This metric provides a breakdown of financial outcomes across different groupings...": {
    en: "This metric provides a breakdown of financial outcomes across different groupings...",
    fr: "Cette mesure fournit une répartition des résultats financiers...",
    // ...
  },
  "Note: Values represent aggregated figures...": {
    en: "Note: Values represent aggregated figures...",
    fr: "Remarque : Les valeurs représentent des chiffres agrégés...",
    // ...
  },
  "Total Sales": {
    en: "Total Sales",
    fr: "Ventes Totales",
    // ...
  },
  "Sum of Profit": {
    en: "Sum of Profit",
    fr: "Somme du bénéfice",
    // ...
  },
  "Category": {
    en: "Category",
    fr: "Catégorie",
    // ...
  },
  "Sales": {
    en: "Sales",
    fr: "Ventes",
    // ...
  },
  "Product": {
    en: "Product",
    fr: "Produit",
    // ...
  }
};
Important Guidelines
  • 🔑 Keys must match exactly: The keys in <InlineCode>translation-dictionary</InlineCode> must exactly match the text in your dashboard configuration (e.g., metric titles, chart subtitles, dynamic labels).
  • 🧠 Prefer longer keys first: If multiple keys are substrings of each other, always define and check the longer, more descriptive one first.
  • 🌐 Add all relevant labels: Include all chart titles, subtitle blocks, footnotes, and section labels that might appear in a rendered dashboard.
Fallback Behavior
If a translation is missing for a given key/language:
  • The system will fall back to the original key.
Dashboard in original language with default text and tooltips

Metric in app

Dashboard translated with French labels using embed translation-dictionary

Metric Translated with fr language in embed system

⌘I