Use the Charts Theme

Last modified: October 22, 2026

Introduction

You can fine-tune the look of individual Charts widgets with their advanced settings. A theme file lets you create global settings that apply to all charts in an app. In this way, you can set colors, language, fonts, and many other things for all charts at once.

This how-to teaches you how to do the following:

  • Find the settings you want with the Chart playground
  • Add a theme configuration file
  • Change the font for all charts

Prerequisites

Before starting this how-to, make sure you have completed the following prerequisites:

Creating a Chart Theme

This is how the original chart looks:

Line chart with three series and the Toggle Editor button, using the default font

Finding the Settings with Chart Playground

To find the settings you want, follow these steps:

  1. Add a Chart playground to your chart, as described in Opening the Playground.

  2. Run the app and open the page with the chart in the browser.

  3. Click Toggle Editor.

  4. In the drop-down list, select Layout, and add the following JSON to Custom settings:

    {
  "font": {
    "family": "Open Sans",
    "size": 14,
    "color": "#555"
  }
}

  5. Change the font settings until the chart shows the font you want, then copy the JSON.

    Chart playground editor with Layout selected and a font JSON object in Custom settings, next to a line chart whose axis labels use the Impact font

  6. In Studio Pro, remove the Chart playground from the chart, as described in Removing the Playground.

Adding a Theme Configuration

To add a theme file that applies to all charts in the app, follow these steps:

  1. In Studio Pro, go to App > Show App Directory in Explorer (or Show App Directory in Finder on macOS).

  2. Open the [YOUR-APP]/theme/web folder (or [YOUR-APP]/theme/native if using native apps).

  3. Create a new file named com.mendix.charts.json:

  4. For each chart that should use the theme, open the chart properties, set Enable advanced options to Yes on the General tab, then go to the Advanced tab and set Enable theme folder config loading to Yes:

    Advanced tab of the chart properties with Enable theme folder config loading set to Yes

Changing the Font Globally

To change the font in all charts in the app, follow these steps:

  1. Open the [app folder]/theme/web/com.mendix.charts.json file in a plain text editor.

  2. Replace or update the content. In the layout section, place the font settings that you found in the playground:

    {
  "layout": {
    "font": {
      "family": "Impact",
      "size": 20,
      "color": "#4682B4"
    }
  }
}

  3. Restart the Mendix app.

  4. Check the result:

    Line chart whose axis labels use the Impact font from the theme file

Theme File Structure

The theme file can contain three top-level properties. At least one of them must be present; otherwise, the file is ignored and a warning is logged in the browser console.

  • layout – Layout settings applied to all charts. For available options, see Layout in the Plotly documentation.
  • configuration – Configuration settings applied to all charts. For available options, see Configuration Options in the Plotly documentation.
  • charts – Series settings per chart type. Each key is a chart type, and its value is applied to every series of that chart type. For available options, see the JavaScript Figure Reference in the Plotly documentation. The possible keys are AreaChart, BarChart, BubbleChart, ColumnChart, HeatMap, LineChart, PieChart, and TimeSeries.

This is an example of a theme file:

{
  "layout": {
    "font": {
      "family": "Open Sans",
      "size": 14
    }
  },
  "configuration": {
    "displayModeBar": false
  },
  "charts": {
    "LineChart": {
      "line": {
        "width": 3
      }
    },
    "BarChart": {
      "opacity": 0.8
    }
  }
}

Read More