---
title: Localize Dashboard UI
product: Dashboard
description: Data charts help improve understanding of large amounts of data. The SurveyJS Dashbord library enables you to build multilingual charts and switch between languages so that survey data can be analyzed by specialists having different mother tongues. View a free demo example for JavaScript to learn more.
framework: React
source: https://surveyjs.io/dashboard/examples/localize-survey-data-dashboard-ui/reactjs
index: https://surveyjs.io/dashboard/examples/overview.md
---

# Localize Dashboard UI (React)

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.

## Localize Dashboard Controls

SurveyJS Dashboard UI is localized to [10+ languages](https://github.com/surveyjs/survey-analytics/tree/master/src/analytics-localization) out of the box and allows you to easily [add custom UI translations for missing languages](https://github.com/surveyjs/survey-analytics/tree/master/src/analytics-localization#add-a-new-dictionary). To apply a locale, assign its identifier to the [`locale`](/dashboard/documentation/api-reference/dashboard#locale) property of a [`Dashboard`](https://surveyjs.io/dashboard/documentation/api-reference/dashboard) instance:

```js
import { Dashboard } from "survey-analytics";

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

// Apply French locale
dashboard.locale = "fr";
```

A dashboard can inherit the current locale for the survey being visualized, provided that the survey JSON schema specifies the [`locale`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#locale) property. To enable this functionality in your dashboard, pass the [`SurveyModel`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model) instance to the [`survey`](/dashboard/documentation/api-reference/idashboardoptions#survey) property of an [`IDashboardOptions`](https://surveyjs.io/dashboard/documentation/api-reference/idashboardoptions) object in the [`Dashboard`](https://surveyjs.io/dashboard/documentation/api-reference/dashboard) constructor, as shown in the code below. This approach is used in the demo you are viewing.

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

const surveyJson = {
  "locale": "fr",
  // ...
};
const survey = new Model(surveyJson);
const dashboard = new Dashboard({
  questions: survey.getAllQuestions(),
  data: surveyResults,
  survey: survey
});
```

## Localize Charts

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](/form-library/examples/survey-localization/ (linkStyle))

## Files

### `public/index.html`

```html
<div id="loadingIndicator" class="data-loading-indicator-panel">
  <div class="data-loading-indicator">
    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_17928_11482)">
        <path d="M32 64C14.36 64 0 49.65 0 32C0 14.35 14.36 0 32 0C49.64 0 64 14.35 64 32C64 49.65 49.64 64 32 64ZM32 4C16.56 4 4 16.56 4 32C4 47.44 16.56 60 32 60C47.44 60 60 47.44 60 32C60 16.56 47.44 4 32 4Z" fill="#E5E5E5" />
        <path d="M53.2101 55.2104C52.7001 55.2104 52.1901 55.0104 51.8001 54.6204C51.0201 53.8404 51.0201 52.5704 51.8001 51.7904C57.0901 46.5004 60.0001 39.4704 60.0001 31.9904C60.0001 24.5104 57.0901 17.4804 51.8001 12.1904C51.0201 11.4104 51.0201 10.1404 51.8001 9.36039C52.5801 8.58039 53.8501 8.58039 54.6301 9.36039C60.6701 15.4004 64.0001 23.4404 64.0001 31.9904C64.0001 40.5404 60.6701 48.5704 54.6301 54.6204C54.2401 55.0104 53.7301 55.2104 53.2201 55.2104H53.2101Z" fill="#19B394" />
      </g>
      <defs>
        <clipPath id="clip0_17928_11482">
          <rect width="64" height="64" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</div>
<div id="surveyDashboardComponent"></div>
```

### `src/surveydata.js`

```js
function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
function generateData() {
  const data = [];
  for (let index = 0; index < 100; index++) {
    data.push({
      satisfaction: randomIntFromInterval(0, 2),
      recommendation: randomIntFromInterval(0, 5)
    });
  }
  return data;
}
export const dataFromServer = generateData();
```

### `src/SurveyDashboardComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Dashboard } from "survey-analytics";
import "survey-analytics/survey.analytics.css";
import "./index.css";
import { json } from "./json";
import "survey-core/survey-core.min.css";
import { dataFromServer } from "./surveydata";

class SurveyDashboardComponent extends React.Component {
    componentDidMount() {
        const survey = new Model(json);
        // Imitate an asynchronous call that loads data from a server
        setTimeout(() => {
            const dashboard = new Dashboard({
                questions: survey.getAllQuestions(),
                data: dataFromServer,
                allowHideQuestions: false,
                survey: survey
            });
            
            
            
            
            document.getElementById("loadingIndicator").style.display = "none";
            dashboard.render("surveyDashboardContainer");
            
        }, 1000);
    }
    render() {
        return React.createElement("div", { id: "surveyDashboardContainer" });
    }
}

export default SurveyDashboardComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
.data-loading-indicator-panel {
    width: 100%;
    height: 400px;
}
.data-loading-indicator {
    position: relative;
    width: 64px;
    height: 64px;
    left: calc((100% - 64px)/ 2);
    top: calc((100% - 64px)/ 2);
    animation: data-loading-indicator-spinner 1s infinite linear;
}
@keyframes data-loading-indicator-spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyDashboardComponent from "./SurveyDashboardComponent";

const root = createRoot(document.getElementById("surveyDashboardComponent"));
root.render(<SurveyDashboardComponent />);
```

### `src/json.js`

```js
export const json = {
  "locale": "fr",
  "elements": [
    {
      "type": "dropdown",
      "name": "satisfaction",
      "title": {
        "default": "How satisfied are you with our product?",
        "fr": "Êtes-vous satisfait du produit?",
        "es": "¿Qué tan satisfecho estás con nuestro producto?"
      },
      "choices": [
        {
          "value": 0,
          "text": {
            "default": "Not satisfied",
            "fr": "Pas satisfait",
            "es": "No satisfecho"
          }
        },
        {
          "value": 1,
          "text": {
            "default": "Satisfied",
            "fr": "Satisfait",
            "es": "Satisfecho"
          }
        },
        {
          "value": 2,
          "text": {
            "default": "Completely satisfied",
            "fr": "Complètement satisfait",
            "es": "Completamente satisfecho"
          }
        }
      ]
    },
    {
      "type": "dropdown",
      "name": "recommendation",
      "title": {
        "default": "How likely are you to recommend our product to a friend or colleague?",
        "fr": "Quelle est la probabilité que vous recommandiez notre produit à un ami ou un collègue ?",
        "es": "¿Qué probabilidades hay de que recomiende nuestro producto a un amigo o colega?"
      },
      "choices": [
        {
          "value": 1,
          "text": {
            "default": "I won't recommend",
            "fr": "Je ne recommanderai pas",
            "es": "No lo recomendaré"
          }
        },
        {
          "value": 2,
          "text": {
            "default": "Unlikely",
            "fr": "Je ne le recommanderais pas",
            "es": "Yo no lo recomendaría"
          }
        },
        {
          "value": 3,
          "text": {
            "default": "Possibly",
            "fr": "Je pourrais le recommander",
            "es": "Podría recomendarlo"
          }
        },
        {
          "value": 4,
          "text": {
            "default": "Likely",
            "fr": "Très probablement à recommander",
            "es": "Lo más probable es que lo recomienden"
          }
        },
        {
          "value": 5,
          "text": {
            "default": "I will recommend",
            "fr": "Je le recommande vivement",
            "es": "Lo recomiendo altamente"
          }
        }
      ]
    }
  ]
};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "chart.js": "4.5.1",
    "survey-analytics": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/dashboard/examples/localize-survey-data-dashboard-ui/angular.md)
- [Vue 3](https://surveyjs.io/dashboard/examples/localize-survey-data-dashboard-ui/vue3js.md)
- [jQuery](https://surveyjs.io/dashboard/examples/localize-survey-data-dashboard-ui/jquery.md)
- [Vanilla JS](https://surveyjs.io/dashboard/examples/localize-survey-data-dashboard-ui/vanillajs.md)