The dashboard can be translated into any left-to-right languages or to suit your customer audience. We allow you to do this by setting these overrides in a textOverrides object.


The Vizzly.Dashboard component offers comprehensive support for translations, ensuring that your dashboard can be adapted to various languages and linguistic nuances. Our translation feature is designed to handle simple string replacements, variables, singular/plural contexts, and limited HTML formatting. The process involves specifying text overrides in a textOverrides object. This guide details how to effectively use this feature.


Simple String Interpolation

Easily replace default text with your desired translations using key-value pairs.

    dashboard_filters: 'Filtres du tableau de bord',
  // more dashboard props

In this example, the text for dashboard_filters is overridden with a French translation.

Variables in a string Interpolation

Incorporate dynamic content within your translations using double-bracket syntax [[..]].

    custom_metric_modal_title: '[[custom_metric_title]] Custom Metric',
  // more dashboard props

Variables, such as [[custom_metric_title]], can reference either user-defined terms from the Semantic Layer or your data, or other translated strings.

Singular and Plural Interpolation

Manage singular and plural forms in translations with {{...}} placeholders.

    'additional_filters.filter_type_subtext': {
      sentence: '[[filterType]] for [[numberOfFields]] {{field}} [[listOfFields]]',
      field_singular: 'field',
      field_plural: 'fields',
  // more dashboard props

This structure allows for nuanced translations that adapt to the quantity of items, ensuring grammatical accuracy.

HTML Elements

Enhance translations with basic HTML formatting. Supported tags include <strong>, <b>, <i>, and <em>.

    goal_line_configuration: 'Set to <strong>[[ruleValue]]</strong>',
  // more dashboard props

Note that only the specified HTML tags are allowed. Using unsupported tags will result in an error.

Debugging Translations

Enhance your debugging experience with our translation key visualization feature. By enabling developerTools={{ translationKeys: true }}, the dashboard will visually highlight each text component, directly associating it with its respective translation key. This functionality simplifies the process of identifying and correlating text elements with their corresponding keys in your translation file.

Enabling Translation Key Visualization To activate this feature, set the developerTools prop as shown below:

  developerTools={{ translationKeys: true }}
  // other dashboard props

Upon activation, each text element on the dashboard will display its translation key as an overlay. This overlay helps developers quickly locate and reference the specific keys used for translation, streamlining the process of debugging and updating text content.

JSON Configuration File

Enhance your setup process with our ready-to-use JSON configuration file. It's pre-filled with essential settings to help you get started quickly.

Click the link below to download the JSON file. Customize it as needed to fit your specific configuration requirements.

Download JSON File

Example Overrides


Change the text displayed when a data set has been modified, and can no-longer support the view the user has configured.


Change the call to action text to configure the dashboard level filters.


Change the text of the 'data' panel toggle button.


Change the text of the 'format' panel toggle button.


Change the text of the 'controls' panel toggle button.


Change the text displayed when the width of cells are adjusted, or the height of a row is adjusted.


Change the text when an error has occured, and the view has failed to fetch the data it needs.


Change the text when a view has received an empty set of results.