Fine-Tune a Chart with Chart Playground

Last modified: June 18, 2025

Introduction

The individual charts widgets can be fine-tuned using a Chart Playground widget. The settings can affect the layout, configuration, and data.

This guide teaches you how to do the following:

  • Change font style (layout)
  • Change chart type (data series)
  • Enable toolbar (configuration)

Prerequisites

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

Changing the Layout

This is what the original chart looks like:

chart

To create a custom layout, follow these steps:

  1. Open an app containing a chart.

  2. Open the page with the charts widget.

  3. Open the charts widget’s settings.

  4. Click the General tab.

  5. Set Show playground slot to Yes. If you check, you can see the widget Playground slot drop zone area is now visible in the chart.

  6. Find the Chart playground widget in Toolbox.

  7. Drag and drop the Chart playground widget onto the available Playground slot.

  8. Run the app.

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

  10. Click the button Toggle Editor.

  11. In the Layout section add the following Custom setting:

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

  12. Change the font settings until the chart shows the required font. Copy the font settings:

    After making some changes, the chart looks like this:

    chart editor

  13. Paste the new font settings into the Custom layout property in the Advanced tab.

  14. Change the Show playground slot back to No in Studio Pro, this will remove the Toggle Editor button from the chart.

Changing the Chart Type

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

chart editor

To create a custom configuration, follow these steps:

  1. Repeat steps 1 to 11 from the layout instructions.

  2. Select the name of the series you want to display differently from the drop-down menu: in this case Series 1.

  3. Edit the Custom settings; change them to { "type": "line" }.

    chart editor

  4. Copy the custom settings.

  5. In Studio Pro, open the Series 1 configuration.

  6. Paste the new configuration for the data into the (Layout) Options property in the Advanced tab.

    chart editor

After the changes, the chart looks like this:

chart editor

Changing the Configuration

To create custom a configuration, follow these steps:

  1. Repeat steps 1 to 11 from the layout instructions.

  2. Select Configuration from the drop-down menu.

  3. Edit the Custom settings, change them to { "displayModeBar": true }.

  4. Add more Custom settings as desired. See here for more configuration settings.

  5. The changes made in the editor are not persistable; copy the required settings.

  6. Paste the new configuration into the Configuration options property in the Advanced tab.

    chart editor

  7. Change Mode to Advanced, set Studio Pro to remove the Toggle Editor button.

    chart editor

Read More