Localize Dashboard UI

Localization capabilities allow you to adapt the dashboard UI to suit the linguistic preferences of your users. A multilingual dashboard presents information in the user's native language and thus helps you reach wider audiences. To localize a dashboard, you need to translate texts within its controls and charts. This example demonstrates how to create a localized dashboard in React, Vue.js, Angular, jQuery, and Vanilla JS applications.

SurveyJS Dashboard UI is localized to 10+ languages out of the box and allows you to easily add custom UI translations for missing languages. To apply a locale, assign its identifier to the locale property of a VisualizationPanel instance:

import { VisualizationPanel } from "survey-analytics";

const vizPanel = new VisualizationPanel(
  surveyQuestions,
  surveyResults,
  vizPanelOptions
);
// Apply French locale
vizPanel.locale = "fr";

A dashboard can inherit the current locale for the survey being visualized, provided that the survey JSON schema specifies the locale property. To enable this functionality in your dashboard, pass the SurveyModel instance to the survey property of an IVisualizationPanelOptions in the VisualizationPanel constructor, as shown in the code below. This approach is used in the demo you are viewing.

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

const surveyJson = {
  "locale": "fr",
  // ...
};
const survey = new Model(surveyJson);
const vizPanel = new VisualizationPanel(
  survey.getAllQuestions(),
  surveyResults,
  {
    survey: survey
  }
);

You can translate chart titles, series point labels, and other textual chart elements. To localize charts, specify required translations in the survey JSON schema. Refer to the json.js file listing for a code example. If a survey JSON schema contains translations to more than one language, the dashboard will automatically display a dropdown that allows users to switch between the languages. For more information on how to localize a survey, refer to the following demo:

Survey Localization