Fine-Tune a Chart with Chart Playground

Last modified: October 22, 2026

Introduction

You can fine-tune individual chart widgets with the Chart playground widget. The playground lets you change the layout, configuration, and series settings of a chart in the running app and see the result right away.

This guide teaches you how to do the following:

  • Change the font style (layout)
  • Change the chart type of a series (series)
  • Enable the toolbar (configuration)

Prerequisites

Before starting this guide, make sure you have completed the following prerequisites:

  • Install the latest version of Mendix Studio Pro
  • Download the latest Charts module from the Mendix Marketplace
  • Set up a chart by following Create a Basic Chart

Opening the Playground

To open the playground on your chart, follow these steps:

  1. Open the page with the chart in Studio Pro.

  2. Open the chart properties and go to the General tab.

  3. Set Show playground slot to Yes. The Playground slot drop zone appears on the chart.

  4. Find the Chart playground widget in the Toolbox.

  5. Drag the Chart playground widget into the Playground slot.

  6. Run the app.

  7. In your browser, open the page with the chart.

  8. Click Toggle Editor:

    Line chart in the running app with the Toggle Editor button in the top right corner

Changing the Layout

This is what the original chart looks like:

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

To create a custom layout, follow these steps:

  1. Open the playground as described in Opening the Playground.

  2. In the drop-down list, select Layout.

  3. In Custom settings, add the following JSON:

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

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

    After making some changes, the chart looks like this:

    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

  5. In Studio Pro, on the General tab of the chart, set Enable advanced options to Yes. Then paste the JSON into the Custom layout property on the Advanced tab.

Changing the Chart Type of a Series

This is what the chart looks like before making any changes:

Column chart with Alpha and Beta series and the Toggle Editor button

To change how one series is drawn, follow these steps:

  1. Open the playground as described in Opening the Playground.

  2. In the drop-down list, select the series you want to display differently. In this example, this is Alpha.

  3. Change Custom settings to { "type": "line" }:

    Chart playground editor with the Alpha series selected and a JSON object that sets type to line in Custom settings, next to a column chart that shows Alpha as a line

  4. Copy the JSON.

  5. In Studio Pro, open the chart properties and set Enable advanced options to Yes on the General tab. Then select Alpha in the Series list and click Edit.

  6. On the Advanced tab of the Edit Series Item dialog box, paste the JSON into Custom series options:

    Advanced tab of the Edit Series Item dialog box with a JSON object that sets type to line in Custom series options

After the changes, the chart looks like this:

Chart with the Alpha series shown as a line and the Beta series shown as columns

Changing the Configuration

To create a custom configuration, follow these steps:

  1. Open the playground as described in Opening the Playground.

  2. In the drop-down list, select Configuration.

  3. Change Custom settings to { "displayModeBar": true }.

  4. Add more settings as needed. For all configuration settings, see Configuration Options in the Plotly documentation.

  5. Copy the JSON.

  6. In Studio Pro, on the General tab of the chart, set Enable advanced options to Yes. Then paste the JSON into the Custom configurations property on the Advanced tab:

    Advanced tab of the chart properties with a JSON object that sets displayModeBar to true in Custom configurations

The chart now shows the toolbar:

Stacked area chart with the Plotly toolbar visible in the top right corner

Removing the Playground

When you are done, remove the playground from the chart:

  1. Delete the Chart playground widget from the Playground slot.
  2. Set Show playground slot to No.

Your changes in Custom layout, Custom configurations, and Custom series options stay in effect.

Read More