Chart Playground

Last modified: October 16, 2026

Introduction

The Chart playground widget is a helper for customizing charts. It adds a live JSON editor to a chart in the running app, so you can see the effect of layout, configuration, and series settings right away. When you are happy with the result, you copy the JSON to the chart properties in Studio Pro.

The Chart playground widget is included in the Charts module. It works with all chart widgets in the module, including Custom chart.

Adding Chart Playground to a Chart

To add a Chart playground to a chart, do the following:

  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. A Playground slot drop zone appears on the chart.

  4. In the Toolbox, find the Chart playground widget.

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

    Chart in the page editor with a Chart playground widget in its Playground slot, and the Chart playground widget in the Toolbox

  6. Run the app and open the page with the chart.

Using the Editor

In the running app, click Toggle Editor on the chart to open the editor panel.

Chart playground editor panel next to a line chart, with Layout selected in the drop-down list, an empty Custom settings editor, and the Settings from the Studio Pro view

The editor panel has these parts:

  • Drop-down list – Selects which settings to edit:
    • Layout – The layout of the whole chart, such as fonts, titles, axes, and legend. For available options, see Layout in the Plotly documentation.
    • One item per series – The settings of a single series (a trace in Plotly). The item shows the series name, or trace with a number if the series has no name. For available options, see the JavaScript Figure Reference in the Plotly documentation.
    • Configuration – The configuration of the chart, such as the mode bar and zoom behavior. For available options, see Configuration Options in the Plotly documentation.
  • Custom settings – An editable JSON editor. Your changes are applied to the chart immediately. If the JSON is invalid, the editor shows it and the chart is not updated.
  • Settings from the Studio Pro – A read-only view of the settings that come from the chart properties in Studio Pro.

To move the keyboard focus out of the editor, press Esc and then Tab.

Saving Your Changes

The playground does not save anything. Copy the JSON from Custom settings to the matching chart property in Studio Pro:

Playground Item Chart Widgets Custom Chart
Layout Advanced tab > Custom layout Layout options tab > Static
A series Edit Series Item dialog box > Advanced tab > Custom series options (for pie charts and heat maps: Advanced tab > Custom series options) Data tab > Static (the item at the same position in the array)
Configuration Advanced tab > Custom configurations Configuration options tab > Configuration options

Removing Chart Playground

Chart playground is a development tool. Before you deploy your app to production, remove it from your charts:

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

If Show playground slot is set to No while a widget is still in the slot, Studio Pro shows an error asking you to remove the widget from the slot.

Read More