Localization & Globalization

SurveyJS Dashboard can display the same survey results in different languages. A complete UI translation consists of dashboard controls and survey-derived content—chart titles and answer labels. This help topic explains how to localize both parts, support language switching, and customize translations for your application.

Dashboard UI is translated into more than 10 languages. We ship these translations as dictionary files maintained by the community. Some strings are marked [Auto-translated], which means they were translated from English using Azure AI Translator by Microsoft. You can override individual translations to change their wording.

If your language is not included, use the English dictionary as a starting point. Copy its keys, provide translated strings, and register a custom locale in your application.

You can share new dictionaries or improvements to existing translations by submitting a pull request to the survey-analytics repository. Follow the dictionary contribution instructions to add your translations to the library.

Dashboard UI dictionaries are included in the survey-analytics package and its browser bundles. Importing the package or referencing a Dashboard script loads these dictionaries automatically. See Get Started for the initial setup.

Dashboard controls use English by default. To apply another language, assign its code to the locale property. For example, "fr" applies French:

import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  questions: surveyQuestions,
  data: surveyResults
});

dashboard.locale = "fr";
dashboard.render("dashboardContainer");

Setting dashboard.locale changes built-in control text, such as "Reset Filter" and chart type names. To translate chart titles and answer labels as well, localize the survey content. A multilingual survey can also provide a language selector in the dashboard toolbar.

To change the wording of a built-in caption, get the required dictionary from localization.locales and update its corresponding key. For example, the following code changes the French caption of the "Reset Filter" button:

import { localization } from "survey-analytics";

const frenchTranslations = localization.locales.fr;
frenchTranslations.resetFilter = "Effacer les filtres";

Apply overrides before rendering Dashboard. Refer to the English dictionary for the available keys.

A custom locale allows you to change several captions together or translate Dashboard controls into a new language. Register it with setupLocale from survey-analytics. Specify a locale code, an object with translated strings, and an optional nativeName for the language selector.

You can keep the dictionary in a separate file. The following example registers a custom English locale with two changed captions:

// custom-locale.js
import { setupLocale } from "survey-analytics";

const customLocaleStrings = {
  resetFilter: "Clear filters",
  chartType_bar: "Bar chart"
};

setupLocale({
  localeCode: "en-custom",
  strings: customLocaleStrings,
  nativeName: "Custom English"
});

Import this file before rendering Dashboard, then select the custom locale:

import "./custom-locale.js";

dashboard.locale = "en-custom";

Strings omitted from the custom dictionary come from the default Dashboard dictionary, which is English by default. To use another fallback language, set localization.defaultLocale before rendering:

import { localization } from "survey-analytics";

localization.defaultLocale = "fr";

If a string is also missing in the default dictionary, Dashboard looks for it in the English dictionary.

To add the custom language to the toolbar's language selector, provide survey content translations under the same locale code and pass the survey model to Dashboard. Registering a UI dictionary alone does not add a language to this selector.

Dashboard takes chart titles and answer labels from your survey schema. You can supply these texts in one language or provide several translations so that users can switch languages while viewing the same response data.

Question titles become chart titles, and choice text becomes answer labels. For a survey in one language, assign translated strings to these properties. For a multilingual survey, replace the strings with objects whose keys are locale codes and values are translations.

The following schema contains English and French text. The default field supplies text when a translation for the selected language is missing. The survey's locale property selects French as the initial language.

{
  "locale": "fr",
  "pages": [
    {
      "name": "feedback",
      "elements": [
        {
          "type": "radiogroup",
          "name": "satisfaction",
          "title": {
            "default": "Are you satisfied with the product?",
            "fr": "Êtes-vous satisfait du produit ?"
          },
          "choices": [
            {
              "value": "yes",
              "text": {
                "default": "Yes",
                "fr": "Oui"
              }
            },
            {
              "value": "no",
              "text": {
                "default": "No",
                "fr": "Non"
              }
            }
          ]
        }
      ]
    }
  ]
}

Keep question names and choice values the same in every language. For example, a response remains { "satisfaction": "yes" } whether the chart displays "Yes" or "Oui". Dashboard can then aggregate the same responses while displaying translated labels.

For other survey texts, such as matrix rows and columns, follow the same approach. See the following help topic for more examples:

Documentation: Localize Survey Contents

To use the survey's current language for Dashboard controls and chart text, pass its SurveyModel instance to the survey option.

The following code uses the schema from the previous section as surveyJson:

import { Model } from "survey-core";
import { Dashboard } from "survey-analytics";

const survey = new Model(surveyJson);

const dashboard = new Dashboard({
  questions: survey.getAllQuestions(),
  data: surveyResults,
  survey: survey
});

dashboard.render("dashboardContainer");

This dashboard starts in French because the schema sets "locale": "fr". Since the schema also contains default English text, the toolbar displays a language selector. Users can switch between English and French, and Dashboard updates the control text, chart titles, and answer labels.

You can also switch languages in code by setting the Dashboard's locale property:

dashboard.locale = "en";

Demo: Localize Dashboard UI