@@ -2,7 +2,6 @@
 title: "Services"
 url: /appstore/services/
 description: "Presents details on the platform-supported services in the Mendix Marketplace."
-weight: 3
 no_list: false
 ---
 
 
@@ -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/)
@@ -0,0 +1,10 @@
+---
+title: "Chart-Specific Settings"
+url: /appstore/widgets/chart-specific-settings/
+description: "Groups the specific settings of individual web chart widgets."
+no_list: false
+---
+
+## Introduction
+
+These documents will help you learn and configure specific chart widgets:
@@ -0,0 +1,30 @@
+---
+title: "Area Chart"
+url: /appstore/widgets/charts-area-chart/
+weight: 100
+description: "Describes the properties of the Area Chart widget in the Charts module."
+---
+
+## Introduction
+
+An area chart shows one or more series as lines with the area under each line filled.
+
+For the properties that all series-based charts share, such as the **Series** list, **Dimensions**, and **Advanced** settings, see [Common Chart Properties](/appstore/widgets/charts/#common-properties). This page describes the properties that are specific to the area chart.
+
+## Appearance Tab
+
+* **Interpolation** – Determines the line shape:
+    * **Linear** – Data points are connected with straight lines.
+    * **Curved** – Data points are connected with curved lines.
+* **Line style**:
+    * **Line** – Draws the series as a simple line.
+    * **Line with markers** – Draws a line with a marker on each data point.
+    * **Custom** – Draws a line with markers as a starting point for your own style in **Custom series options**.
+* **Line color** – The color of the line for this series.
+* **Marker color** – The color of the markers for this series. This property is visible only when **Line style** is set to **Line with markers**.
+* **Area fill color** – The color of the area under the line for this series.
+
+## Read More
+
+* [Charts](/appstore/widgets/charts/)
+* [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/)
@@ -0,0 +1,32 @@
+---
+title: "Bar Chart"
+url: /appstore/widgets/charts-bar-chart/
+weight: 110
+description: "Describes the properties of the Bar Chart widget in the Charts module."
+---
+
+## Introduction
+
+A bar chart shows one or more series as horizontal bars.
+
+For the properties that all series-based charts share, such as the **Series** list, **Dimensions**, and **Advanced** settings, see [Common Chart Properties](/appstore/widgets/charts/#common-properties). This page describes the properties that are specific to the bar chart.
+
+## General Section
+
+### Bar Format
+
+This setting controls the bar format:
+
+* **Grouped** – Bars of different series are placed one below the other.
+* **Stacked** – Bars of different series are stacked on top of one another, forming one bar.
+
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/bar-chart-formats.png" width="450px" alt="Two bar charts. On the left bar chart lines in group go one below other. On the right chart, lines in group stacked on top of each other, forming one big line." class="no-border" >}}
+
+## Appearance Tab
+
+* **Bar color** – The color of the bars for this series.
+
+## Read More
+
+* [Charts](/appstore/widgets/charts/)
+* [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/)
@@ -0,0 +1,29 @@
+---
+title: "Bubble Chart"
+url: /appstore/widgets/charts-bubble-chart/
+weight: 120
+description: "Describes the properties of the Bubble Chart widget in the Charts module."
+---
+
+## Introduction
+
+A bubble chart shows one or more series as bubbles. The size of each bubble is set by an attribute.
+
+For the properties that all series-based charts share, such as the **Series** list, **Dimensions**, and **Advanced** settings, see [Common Chart Properties](/appstore/widgets/charts/#common-properties). This page describes the properties that are specific to the bubble chart.
+
+## General Tab
+
+In addition to the [common series properties](/appstore/widgets/charts/#series-general), the **General** tab has these properties:
+
+* **Bubble size attribute** – The attribute whose value determines the size of the bubble.
+* **Auto scale** – If set to **Yes**, bubble sizes are scaled automatically. If set to **No**, the **Scale factor** is used.
+* **Scale factor** – The number used to calculate the rendered bubble size. The value of the **Bubble size attribute** is multiplied by this factor. This property is visible only when **Auto scale** is set to **No**. The default value is **10**.
+
+## Appearance Tab
+
+* **Marker color** – The color of the bubbles for this series.
+
+## Read More
+
+* [Charts](/appstore/widgets/charts/)
+* [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/)
@@ -0,0 +1,33 @@
+---
+title: "Column Chart"
+url: /appstore/widgets/charts-column-chart/
+weight: 130
+description: "Describes the properties of the Column Chart widget in the Charts module."
+---
+
+## Introduction
+
+A column chart shows one or more series as vertical columns.
+
+For the properties that all series-based charts share, such as the **Series** list, **Dimensions**, and **Advanced** settings, see [Common Chart Properties](/appstore/widgets/charts/#common-properties). This page describes the properties that are specific to the column chart.
+
+## General Section
+
+### Column Format
+
+This setting controls the column format:
+
+* **Grouped** – Columns of different series are placed next to each other.
+* **Stacked** – Columns of different series are stacked on top of each other, forming one column.
+
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/column-chart-format-grouped-vs-stacked.png" alt="Two column charts. On the left, Alpha and Beta columns are side by side. On the right, Beta is stacked on top of Alpha." class="no-border" >}}
+    Two format types of column chart, where group format is present on the left and stack format is present on the right.
+
+## Appearance Tab
+
+* **Column color** – The color of the columns for this series.
+
+## Read More
+
+* [Charts](/appstore/widgets/charts/)
+* [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/)
@@ -0,0 +1,54 @@
+---
+title: "Heat Map"
+url: /appstore/widgets/charts-heat-map/
+weight: 140
+description: "Describes the properties of the Heat Map widget in the Charts module."
+---
+
+## Introduction
+
+A heat map shows values as colors on a grid of X and Y locations.
+
+For the **Dimensions** and **Advanced** settings, which all charts share, see [Common Chart Properties](/appstore/widgets/charts/#common-properties). This page describes the properties that are specific to the heat map.
+
+The heat map does not use a series list. It uses one data source and draws a value (the "heat") at each X and Y location.
+
+## Data Source Section
+
+* **Series** – The data source for the heat map.
+* **Value attribute** – The attribute used to display the heat at an X and Y location.
+* **Selection type** – Set to **Single** to let users select a cell. Other widgets can then listen to the selection.
+
+## Axis Section
+
+* **X Axis Attribute** – The attribute used for the horizontal (X) axis.
+* **X Axis Sort Attribute** – The attribute used to sort the items on the horizontal axis. Sorting only works when the data source is **Database**. For a **Microflow** data source, sort the data in the microflow.
+* **X Axis Sort Order** – **Ascending** or **Descending**.
+* **Y Axis Attribute** – The attribute used for the vertical (Y) axis.
+* **Y Axis Sort Attribute** – The attribute used to sort the items on the vertical axis. Sorting only works when the data source is **Database**. For a **Microflow** data source, sort the data in the microflow.
+* **Y Axis Sort Order** – **Ascending** or **Descending**.
+
+## General Section
+
+* **Show Scale** – If set to **Yes**, a color scale is shown on the right side of the chart.
+
+The heat map also has the **X axis label**, **Y axis label**, and **Grid lines** properties described in [General Section](/appstore/widgets/charts/#general). It does not have the **Show legend** property.
+
+## Scale Section
+
+* **Colors** – The list of colors to use in the heat map. Each item sets a color for a **Percentage** of the value range, between 0 and 100. Specify at least two items, for 0% and 100%. Otherwise, the default colors are used.
+* **Smooth color** – If set to **Yes**, the colors form a gradual gradient between data points.
+* **Show values** – If set to **Yes**, the value of each cell is shown on the chart.
+* **Font value color** – The font color of the values shown on the chart.
+
+**Smooth color**, **Show values**, and **Font value color** are visible only when [Enable advanced options](/appstore/widgets/charts/#enable-advanced-options) is set to **Yes**.
+
+## Events Section
+
+* **On click action** – The action that runs when the user clicks a cell.
+* **Tooltip hover text** – The text template for the message shown when the user hovers over a cell.
+
+## Read More
+
+* [Charts](/appstore/widgets/charts/)
+* [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/)
@@ -0,0 +1,29 @@
+---
+title: "Line Chart"
+url: /appstore/widgets/charts-line-chart/
+weight: 150
+description: "Describes the properties of the Line Chart widget in the Charts module."
+---
+
+## Introduction
+
+A line chart shows one or more series as lines.
+
+For the properties that all series-based charts share, such as the **Series** list, **Dimensions**, and **Advanced** settings, see [Common Chart Properties](/appstore/widgets/charts/#common-properties). This page describes the properties that are specific to the line chart.
+
+## Appearance Tab
+
+* **Interpolation** – Determines the line shape:
+    * **Linear** – Data points are connected with straight lines.
+    * **Curved** – Data points are connected with curved lines.
+* **Line style**:
+    * **Line** – Draws the series as a simple line.
+    * **Line with markers** – Draws a line with a marker on each data point.
+    * **Custom** – Draws a line with markers as a starting point for your own style in **Custom series options**.
+* **Line color** – The color of the line for this series.
+* **Marker color** – The color of the markers for this series. This property is visible only when **Line style** is set to **Line with markers**.
+
+## Read More
+
+* [Charts](/appstore/widgets/charts/)
+* [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/)