Use the Charts Theme

Last update: Download PDF Edit

1 Introduction

The individual Charts widgets can be fine tuned with advanced settings. The theme allows developers to create “global settings that applies to all charts”. This way color, language, font and many more things could be set.

This how-to will teach you how to do the following:

  • Change font style for all charts
  • Add a theme configuration

2 Prerequisites

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

3 Create a chart theme

Before: chart

3.1 Create advanced custom configuration

To figure out the required custom configuration, follow these steps:

  1. Open the project with the chart
  2. Open the page with chart
  3. Open the chart widget settings
  4. Go to the tab Advanced
  5. Set the Mode to Developer
    chart widget properties
  6. Run the project
  7. Open in the browser the page with the chart
  8. Click on the Toggle Editor button
  9. In the Layout section add the Custom setting

    {
    "font": {
    "family": "Open Sans",
    "size": 14,
    "color": "#555"
    }
    }
    
  10. Change the font settings, till the chart shows required font

  1. Set Mode to Advanced in modeler, to remove the Toggle Editor button.

chart editor

3.2 Add theme configuration

To add a theme file, follow these steps:

  1. From the desktop modeler, go to the menu Project > Show Project Directory in Explorer
  2. Open the folder theme
  3. Create a new file com.mendix.charts.json (Please not that the file name is case sensitive and the file extension is json)
  4. Open the file in a plain text editor
  5. Add json empty object
    ```json {

}


### 3.3 Change the font globally
To change the font, follow these steps:

1. Edit the *[project folder]/theme/com.mendix.charts.json* file
1. Replace or update the content. In the **layout** section, place the style changes that are created in the first section of this how to.  
```json
{
  "layout": {
    "font": {
      "family": "Impact",
      "size": 20,
      "color": "#4682B4"
    }
  }
}
  1. Restart the Mendix modeler
  2. Validate the expected results

chart updated

4 Reference