Charts docs: reconcile with Charts module 6.3.2

content/en/docs/marketplace/platform-supported-content/widgets/charts/chart-playground.md

@@ -0,0 +1,82 @@
+---
+title: "Chart Playground"
+url: /appstore/widgets/chart-playground/
+weight: 180
+description: "Describes the Chart playground widget, which lets you edit the layout, configuration, and series settings of a chart live while the app runs."
+aliases:
+    - /appstore/widgets/ChartPlayground/
+---
+
+## 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](/appstore/widgets/charts/) module. It works with all chart widgets in the module, including [Custom chart](/appstore/widgets/charts-custom-usage/).
+
+{{% alert color="warning" %}}
+Changes made in the Chart playground are for preview only. They are lost when you reload the page. To keep your changes, copy the JSON to the chart properties in Studio Pro.
+{{% /alert %}}
+
+{{% alert color="info" %}}
+In Charts versions below 5.0.0, the live editor was enabled with the **Enable developer mode** property instead of a separate Chart playground widget.
+{{% /alert %}}
+
+## Adding Chart Playground to a Chart {#add}
+
+To add a Chart playground to a chart, do the following:
+
+1. Open the page with the chart in Studio Pro.
+1. Open the chart properties and go to the **General** tab.
+1. Set **Show playground slot** to **Yes**. A **Playground slot** drop zone appears on the chart.
+1. In the **Toolbox**, find the **Chart playground** widget.
+1. Drag the **Chart playground** widget into the **Playground slot**.
+
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/chart-playground-add.png" alt="Chart in the page editor with a Chart playground widget in its Playground slot, and the Chart playground widget in the Toolbox" class="no-border" >}}
+
+1. Run the app and open the page with the chart.
+
+{{% alert color="info" %}}
+The Chart playground widget has no properties of its own. It gets all its data from the chart it is placed in. If you place it anywhere other than a **Playground slot**, it shows an error.
+{{% /alert %}}
+
+## Using the Editor {#editor}
+
+In the running app, click **Toggle Editor** on the chart to open the editor panel.
+
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/chart-playground-editor.png" alt="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" class="no-border" >}}
+
+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](https://plotly.com/javascript/reference/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](https://plotly.com/javascript/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](https://plotly.com/javascript/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 <kbd>Esc</kbd> and then <kbd>Tab</kbd>.
+
+## Saving Your Changes {#save}
+
+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 {#remove}
+
+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**.
+1. 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
+
+* [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/)
+* [Chart Advanced Cheat Sheet](/refguide/charts-advanced-cheat-sheet/)
+* [Charts](/appstore/widgets/charts/)

content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-advanced-tuning.md

@@ -3,52 +3,59 @@ title: "Fine-Tune a Chart with Chart Playground"
 linktitle: "Chart Advanced Tuning"
 url: /appstore/widgets/chart-advanced-tuning/
 weight: 30
-description: "Describes the settings you can use to change chart layouts and types"
+description: "Describes how to use the Chart playground widget to change the layout, series, and configuration of a chart."
 aliases:
     - /howto/front-end/chart-advanced-tuning/
 ---
 
 ## Introduction
 
-The individual charts widgets can be fine-tuned using a **Chart Playground** widget. The settings can affect the layout, configuration, and data.
+You can fine-tune individual chart widgets with the [Chart playground](/appstore/widgets/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.
 
 {{% alert color="info" %}}
-The **Chart Playground** widget is included in [Charts Widget](/appstore/widgets/charts/). It replaces developer mode in Charts Widget versions 5 and higher.
+The Chart playground widget is included in the [Charts](/appstore/widgets/charts/) module. It replaces developer mode in Charts versions 5.0.0 and above.
 {{% /alert %}}
 
-This guide teaches you how to do the following:  
+This guide teaches you how to do the following:
 
-* Change font style (layout)
-* Change chart type (data series)
-* Enable toolbar (configuration)
+* 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:
 
-* Installed the latest version of Mendix Studio Pro
-* Downloaded the latest [Charts Widget](/appstore/widgets/charts/) from the Mendix Marketplace
-* Set up a chart by using [How to Create a Chart](/howto/front-end/charts-basic-create/)
+* Install the latest version of Mendix Studio Pro
+* Download the latest [Charts](https://marketplace.mendix.com/link/component/105695/) module from the Mendix Marketplace
+* Set up a chart by following [Create a Basic Chart](/appstore/widgets/charts-basic-create/)
+
+## Opening the Playground {#open-playground}
+
+To open the playground on your chart, follow these steps:
+
+1. Open the page with the chart in Studio Pro.
+1. Open the chart properties and go to the **General** tab.
+1. Set **Show playground slot** to **Yes**. The **Playground slot** drop zone appears on the chart.
+1. Find the **Chart playground** widget in the **Toolbox**.
+1. Drag the **Chart playground** widget into the **Playground slot**.
+1. Run the app.
+1. In your browser, open the page with the chart.
+1. Click **Toggle Editor**.
+
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor-closed.png" alt="Line chart in the running app with the Toggle Editor button in the top right corner" max-width="60%" class="no-border" >}}
 
 ## Changing the Layout {#layout-changes}
 
 This is what the original chart looks like:
 
-{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor.png" alt="chart" class="no-border" >}}
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor.png" alt="Line chart with three series and the Toggle Editor button, using the default font" class="no-border" >}}
 
 To create a custom layout, follow these steps:
 
-1. Open an app containing a chart.
-1. Open the page with the charts widget.
-1. Open the charts widget's settings.
-1. Click the **General** tab.
-1. 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.
-1. Find the **Chart playground** widget in **Toolbox**.
-1. Drag and drop the **Chart playground** widget onto the available **Playground slot**.
-1. Run the app.
-1. In your browser, open the page with the chart.
-1. Click the button **Toggle Editor**.
-1. In the **Layout** section add the following **Custom setting**:
+1. Open the playground as described in [Opening the Playground](#open-playground).
+1. In the drop-down list, select **Layout**.
+1. In **Custom settings**, add the following JSON:
 
     ```json
     {
@@ -60,60 +67,71 @@ To create a custom layout, follow these steps:
     }
     ```
 
-1. Change the font settings until the chart shows the required font. Copy the font settings:
+1. Change the font settings until the chart shows the font you want, then copy the JSON.
 
-    {{% alert color="warning" %}}Please note that changes made in the editor will not persist unless they are stored in the advanced settings of the widget or in the theme.{{% /alert %}}
+    {{% alert color="warning" %}}Changes made in the playground do not persist. Store them in the chart properties or in the [Charts theme](/appstore/widgets/charts-theme/).{{% /alert %}}
 
     After making some changes, the chart looks like this:
 
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor-open.png" alt="chart editor" class="no-border" >}}
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor-open.png" alt="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" class="no-border" >}}
 
-1. Paste the new font settings into the **Custom layout** property in the **Advanced** tab.
-1. Change the **Show playground slot** back to **No** in Studio Pro, this will remove the Toggle Editor button from the chart.  
+1. 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
+## Changing the Chart Type of a Series {#series-changes}
 
 This is what the chart looks like before making any changes:
 
-{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar.png" alt="chart editor" class="no-border" >}}
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar.png" alt="Column chart with Alpha and Beta series and the Toggle Editor button" class="no-border" >}}
 
-To create a custom configuration, follow these steps:
+To change how one series is drawn, follow these steps:
 
-1. Repeat steps 1 to 11 from the [layout instructions](#layout-changes).
-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" }`.
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination.png" alt="chart editor" class="no-border" >}}
-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.
+1. Open the playground as described in [Opening the Playground](#open-playground).
+1. In the drop-down list, select the series you want to display differently. In this example, this is **Alpha**.
+1. Change **Custom settings** to `{ "type": "line" }`.
 
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-properties.png" alt="chart editor" class="no-border" >}}
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination.png" alt="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" class="no-border" >}}
+
+1. Copy the JSON.
+1. 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**.
+1. On the **Advanced** tab of the **Edit Series Item** dialog box, paste the JSON into **Custom series options**.
+
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-properties.png" alt="Advanced tab of the Edit Series Item dialog box with a JSON object that sets type to line in Custom series options" width="450px" class="no-border" >}}
 
 After the changes, the chart looks like this:
 
-{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-result.png" alt="chart editor" class="no-border" >}}
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-result.png" alt="Chart with the Alpha series shown as a line and the Beta series shown as columns" class="no-border" >}}
+
+## Changing the Configuration {#configuration-changes}
+
+To create a custom configuration, follow these steps:
+
+1. Open the playground as described in [Opening the Playground](#open-playground).
+1. In the drop-down list, select **Configuration**.
+1. Change **Custom settings** to `{ "displayModeBar": true }`.
+1. Add more settings as needed. For all configuration settings, see [Configuration Options](https://plotly.com/javascript/configuration-options/) in the Plotly documentation.
+1. Copy the JSON.
+1. 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.
+
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-properties-advanced-config.png" alt="Advanced tab of the chart properties with a JSON object that sets displayModeBar to true in Custom configurations" width="450px" class="no-border" >}}
+
+The chart now shows the toolbar:
 
-## Changing the Configuration 
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-config-toolbar.png" alt="Stacked area chart with the Plotly toolbar visible in the top right corner" class="no-border" >}}
 
-To create custom a configuration, follow these steps:
+## Removing the Playground {#remove-playground}
 
-1. Repeat steps 1 to 11 from the [layout instructions](#layout-changes).
-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](https://plot.ly/javascript/configuration-options/) 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.
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-properties-advanced-config.png" alt="chart editor" class="no-border" >}}
-7. Change **Mode** to **Advanced**, set Studio Pro to remove the **Toggle Editor** button.
+When you are done, remove the playground from the chart:
 
-    {{% alert color="warning" %}}Please note that the advanced settings only apply to the chart in Advanced or Developer mode{{% /alert %}}
+1. Delete the **Chart playground** widget from the **Playground slot**.
+1. Set **Show playground slot** to **No**.
 
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-config-toolbar.png" alt="chart editor" class="no-border" >}}
+Your changes in **Custom layout**, **Custom configurations**, and **Custom series options** stay in effect.
 
 ## Read More
 
-* Reference for the [advanced properties](/refguide/charts-configuration/#advanced)
-* Layout options: [cheat sheet](/refguide/charts-advanced-cheat-sheet/#layout-all)  
-* Configuration options: [cheat sheet](/refguide/charts-advanced-cheat-sheet/#config-options)  
-* Data series options: [cheat sheet](/refguide/charts-advanced-cheat-sheet/#data-series)  
-* Full reference: [Plotly JavaScript Open Source Graphing Library](https://plot.ly/javascript/)
+* [Chart Playground](/appstore/widgets/chart-playground/)
+* [Charts](/appstore/widgets/charts/)
+* Layout options: [Chart Advanced Cheat Sheet](/refguide/charts-advanced-cheat-sheet/#layout-all)
+* Configuration options: [Chart Advanced Cheat Sheet](/refguide/charts-advanced-cheat-sheet/#config-options)
+* Data series options: [Chart Advanced Cheat Sheet](/refguide/charts-advanced-cheat-sheet/#data-series)
+* Full reference: [Plotly JavaScript Open Source Graphing Library](https://plotly.com/javascript/)

content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-any-usage.md

@@ -93,7 +93,7 @@ To generate JSON data for the Charts widget, follow these steps:
 
 If need be, the layout can also be generated in the same way as the data. In most cases, a **Static** layout will suffice.
 
-## Fine tuning
+## Fine-Tuning
 
 Editing the JSON configuration in Studio Pro can be cumbersome. With the live preview editor, developers can directly see the output of their changes.