diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/_index.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/_index.md
index 53f06f8cdb0..c2b1ba935b8 100644
--- a/content/en/docs/marketplace/platform-supported-content/widgets/charts/_index.md
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/_index.md
@@ -10,7 +10,7 @@ aliases:
 
 ## Introduction
 
-The [Charts](https://marketplace.mendix.com/link/component/105695/) widget enables plotting and comparing your data across different charts.
+The [Charts](https://marketplace.mendix.com/link/component/105695/) module contains widgets that plot and compare your data in different chart types. The widgets are based on the [Plotly JavaScript](https://plotly.com/javascript/) library.
 
 For more examples of what Charts widgets can do, see the following documents:
 
@@ -26,532 +26,208 @@ For more examples of what Charts widgets can do, see the following documents:
 This document assumes that you are using Charts widget v3.0.0 or above. To read documentation for older versions, see the [Legacy Chart Widget Documentation](#legacy-widget-docs) section below.
 {{% /alert %}}
 
-These are the available charts:
+### Chart Types
 
-* Column chart
-* Line chart
-* Pie chart
-* Area chart
-* Bar chart
-* Time series chart
-* Heat chart
-* Bubble chart
+The Charts module contains these widgets:
 
-## Common Chart Properties
+* [Area chart](/appstore/widgets/charts-area-chart/)
+* [Bar chart](/appstore/widgets/charts-bar-chart/)
+* [Bubble chart](/appstore/widgets/charts-bubble-chart/)
+* [Column chart](/appstore/widgets/charts-column-chart/)
+* [Heat map](/appstore/widgets/charts-heat-map/)
+* [Line chart](/appstore/widgets/charts-line-chart/)
+* [Pie chart](/appstore/widgets/charts-pie-chart/)
+* [Time series](/appstore/widgets/charts-time-series/)
+* Custom chart – For more information, see [Use Custom Chart](/appstore/widgets/charts-custom-usage/).
+* Chart playground – For more information, see [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/).
 
-### Data Source
+Area, bar, bubble, column, line, and time series charts share the series-based properties described in [Common Chart Properties](#common-properties). Heat map and pie chart use a single data source instead of a series list. For properties unique to each chart type, see the page for that chart type.
 
-#### Series
+## Common Chart Properties {#common-properties}
 
-The **Series** property makes it easy to configure, control, and modify a chart series:
+### Data Source Section {#data-source}
 
-{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/data-source-example.png" width="450px" class="no-border" >}}
+#### Series {#series}
 
-You do not need to put a chart into a data view to feed data into a widget. When you click the **New** button on a series panel, the **Edit Series** dialog box will be shown:
+The **Series** property contains the list of data series that the chart shows. Each series is drawn as a separate line, set of bars, or set of bubbles. The order of the list influences how series overlay one another: the first series in the list is drawn lowest, and the series after it are drawn on top.
 
-{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/series-item-example.png" width="450px" class="no-border" >}}
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/data-source-example.png" alt="Series list on the General tab with three single series named Alpha, Beta, and Gamma, and the New, Delete, Edit, Move Up, and Move Down buttons" width="450px" class="no-border" >}}
 
-In this dialog box you will find these properties:
+You do not need to put a chart into a data view to feed data into a widget. To add a series, click **New** in the **Series** list. To change a series, select it and click **Edit**. The **Edit Series Item** dialog box has four tabs: **General**, **Appearance**, **Events**, and **Advanced**.
 
-* **Data set**
-    * **Single** – This represents controls for a single set of dates. This is good option to start with, as you can have multiple **Single** series. 
-    * **Multiple** – This is useful if you have a more complex data model or a microflow which could be used as data source for your chart. In this case you must specify which attribute to use as the **Series name**, otherwise your widget will be unable to visualize your data correctly.
-* **Data source** – This property controls your data set's type and source. If you click **Edit** you will see a **Data source edit** dialog box where you specify the data series retrieval location.
-* **Group by** – This is the attribute used to split items into groups (visible only when **Data set** is set to **Multiple**).
-* **Series name** – This property controls the legend of a data series.
-* **X axis attribute** – This is the attribute used to get a value for the X axis (visible only when **Data source** is set).
-* **Y axis attribute** – This is the attribute used to get a value for the Y axis (visible only when **Data source** is set).
-* **Aggregation function** – This attribute defines how data is aggregated when multiple Y values are available for a single X value.
-* **Tooltip hover text** – This is the text template used to customize the message shown to user upon a cursor hovering over the series.
+##### General Tab {#series-general}
 
-Beside the **General** tab you will find 3 more tabs in the **Edit Series** dialog box:
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/series-item-example.png" alt="General tab of the Edit Series Item dialog box with Data set set to Single series, a microflow data source, and the series name Alpha" width="450px" class="no-border" >}}
 
-* **Appearance** – This lists properties which allow you to modify styling for the current data series. In most cases there will be color properties.
-* **Events** – This lists possible event triggers.
-* **Advanced** – This uses one field which will hold a JSON object with advanced configuration for this data series.
+The **General** tab has these properties:
 
-### General
+* **Data set** – Defines how the series gets its data:
+    * **Single series** – One data source draws one series. This is a good option to start with. To show more data, add more **Single series** items to the list.
+    * **Multiple series** – One data source draws several series, split by the **Group by** attribute. This is useful if you have a more complex data model or a microflow that returns the data for all series at once.
+* **Data source** – The source of the data points for the series. Click **Edit** to set the data source type and the entity. For a **Database** data source, you can also add an **XPath constraint**.
+* **Group by** – The attribute used to split data points into groups. Each group becomes one series. This property is visible only when **Data set** is set to **Multiple series**.
+* **Series name** – The series name shown in the legend. When **Data set** is set to **Multiple series**, use an attribute of the group in this text template, so each series gets its own name.
+* **X axis attribute** – The attribute used for the value on the X axis.
+* **Y axis attribute** – The attribute used for the value on the Y axis.
+* **Aggregation function** – Defines how data is aggregated when multiple Y values are available for a single X value. Possible values are **None**, **Count**, **Sum**, **Average**, **Minimum**, **Maximum**, **Median**, **Mode**, **First**, and **Last**.
+* **Tooltip hover text** – The text template for the message shown when the user hovers over a data point.
 
-#### Enable Developer Mode
+##### Appearance Tab {#series-appearance}
 
-{{% alert color="warning" %}}
-All changes made in the developer editor are temporary. To save your progress, copy the settings from the **Custom settings** area to the **Chart settings** in Studio Pro.
-{{% /alert %}}
-
-See [Fine-Tune chart](/appstore/widgets/chart-advanced-tuning/) documentation to enable this.
-
-{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/toggle-editor-button.png" width="350px" alt="Toggle Editor button in top right corner of the chart widget." class="no-border" >}}
-
-This developer mode panel is a live settings editor, meaning that your changes will be instantly applied to the current chart.
+The **Appearance** tab contains the styling properties for the current series, such as line, marker, bar, or fill colors. These properties differ per chart type. For details, see [Chart-Specific Settings](#chart-specific-settings).
 
-At the top of the panel there is a drop-down list which shows the currently selected settings group. By default each chart has a **Layout** group and **Configuration** group—these groups control chart and layout settings. Also, in this drop-down list you will find named groups that allow you to configure chart settings per series:
+Color properties on this tab accept a CSS color value, such as `blue`, `#48B0F7`, or `rgb(72, 176, 247)`.
 
-{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-dev-panel.png" width="350px" alt="Panel with dropdown on top and textarea below. Textarea content is a JSON object." class="no-border" >}}
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/series-appearance-tab.png" alt="Appearance tab of the Edit Series Item dialog box for a line chart, with Line style set to Line with markers and the Line color and Marker color properties" width="450px" class="no-border" >}}
 
-{{% alert color="info" %}} 
-To see available options and useful examples, see Plotly's [JavaScript Figure Reference](https://plotly.com/javascript/reference/index/) guide. 
+{{% alert color="info" %}}
+The **Appearance** tab of the **Edit Series Item** dialog box only styles the data series. To style the chart widget as a whole, use its design properties, classes, and styles. For more information, see [Design Properties API](/apidocs-mxsdk/apidocs/design-properties/).
 {{% /alert %}}
 
-For more information on saving custom settings for a chart, see the [Chart customization](#customization).
-
-#### Show Legend
-
-{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/chart-with-legend.png" width="450px" alt="Column chart. The legend list on right side is highlighted with red square." class="no-border" >}}
-
-This setting controls the visibility of a chart's legend block (highlighted in the picture above). If set to **no**, then the legend block is hidden.
-
-#### X Axis Label and Y Axis Label
-
-These two properties control labels for the X and Y axis respectively.
-
-#### Grid Lines
-
-This property controls horizontal and vertical rulers of the chart:
-
-* **None** – No rulers are visible.
-* **Horizontal** – Only a horizontal ruler is visible.
-* **Vertical** – Only a vertical ruler is visible.
-* **Both** – Both types of rulers are visible.
-
-## Dimensions
-
-### Width Unit
-
-This property controls the unit measuring the widget (it can be **percentage** or **pixels**).
-
-### Width
-
-This property controls width of the widget.
-
-### Height Unit
-
-This property controls the unit for measuring widget height:
-
-* **Percentage of width** – Height is measured relative to widget width (use this mode to keep width and height in aspect ratio).
-* **Pixels** – This uses pixels as height unit (a good option for most cases).
-* **Percentage of parent** – Height is measured relative to a parent **height** property (only works when parent has **height** CSS property).
-
-### Height
-
-This property controls height of the widget.
-
-## Advanced
-
-### Enable Theme Folder Config
-
-If set to **Yes** this widget will try to load global chart settings specified in the *theme/web/com.mendix.charts.json* file. Before using this feature make sure this file is present in your app.
-
-### Custom Layout
-
-Please, find more details in [Custom Layout](#custom-layout) in customization section.
-
-### Custom Configurations
-
-Please, find more details in [Custom Configurations](#custom-configurations) in customization section.
-
-## Chart-Specific Settings
-
-### Area Chart
-
-#### Edit Series Item Dialog
-
-##### Appearance
-
-* **Interpolation** – Determines the line shape. Could be  **linear** or **curved**. In **linear** mode dots will be connected using straight lines, in **curved** they will be connected using curved lines.
-* **Line style**
-    * **Line** – Draws a series as simple line.
-    * **Line with markers** – Draws a line with markers on top of each dot.
-    * **Custom** – Makes a custom line style for series.
-* **Line color** – The color used to fill line for this data series.
-* **Area fill color** – The color used to fill area for this data series.
-
-### Bar Chart
-
-#### General
-
-##### Bar Format
-
-This setting controls the bar format. In the **group** format, bars go one below the other. In the **stacked** format, bars are stacked on top of one another forming one line.
-
-{{< 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" >}}
-
-#### Edit Series Item Dialog
-
-##### Appearance
-
-* **Bar color** – The color used to fill line for this data series.
-
-### Bubble Chart
-
-#### Edit Series Item Dialog
-
-##### General
-
-* **Bubble Size Attribute** – This attribute controls bubble size for a given item in series.
-* **Auto Scale** – If **Yes** then bubble size and proportions will be computed automatically (otherwise the value from **Scale factor** will be used).
-* **Scale Factor** – This controls the scale factor of bubbles on a chart. This value will be used to determine the final bubble size by multiplying current scale factor value and value from the bubble size attribute.
-
-##### Appearance
-
-* **Marker color** – The color used to fill marker for this data series.
-
-### Column Chart
-
-#### General
-
-##### Column Format
-
-This setting controls a chart's format. In the **group** format, columns go one after another. In the **stacked** format columns from each series will be stacked on top of each other. 
-
-{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/column-chart-format-grouped-vs-stacked.png" alt="Two column charts. On the left chart columns go one after another. On the right chart pairs of columns stacked on each other, each pair go one after another." title="Two format types of column chart, where group format is present on the left and stack format is present on the right." class="no-border" >}}
-
-#### Edit Series Item Dialog
-
-##### Appearance
-
-* **Column color** – The color used to fill columns for this data series.
-
-### Heat Map
-
-#### Data Source
-
-##### Value attribute
-
-The entity attribute used to retrieve value for z axis (aka heat).
-
-#### Axis
-
-##### X Axis Attribute
-
-This is a value for a chart's horizontal (x) axis.
-
-##### X Axis Sort Attribute
+##### Events Tab {#series-events}
 
-The attribute to used when sorting items in series for horizontal axis.
+The **Events** tab contains the **On click action** property. This action runs when the user clicks a data point in this series. The action runs in the context of the object behind the data point.
 
-##### Y Axis Attribute
+##### Advanced Tab {#series-advanced}
 
-This is a value for a chart's vertical (y) axis.
+The **Advanced** tab contains the **Custom series options** property. This property holds a JSON object with advanced configuration for this series. For more information, see [Custom Series Settings](#custom-series-settings). This property is visible only when [Enable advanced options](#enable-advanced-options) is set to **Yes**.
 
-##### Y Axis Sort Attribute
+### General Section {#general}
 
-The attribute to used when sorting items in series for vertical axis.
+#### Enable Advanced Options {#enable-advanced-options}
 
-#### General
+If set to **Yes**, the chart shows the properties on its **Advanced** tab and the **Custom series options** property on the **Advanced** tab of each series. The default value is **No**.
 
-##### Show Scale
+#### Show Playground Slot {#show-playground-slot}
 
-If set to **Yes** then show scale on the right side of the chart.
+If set to **Yes**, the chart shows a **Playground slot** in the page editor. Place a Chart playground widget in this slot to edit the chart's layout, configuration, and series settings live while the app runs. For more information, see [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/).
 
-#### Scale
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/show-playground-slot.png" alt="Line chart in the page editor with a Chart playground widget in its Playground slot, shown as a Toggle Editor button" width="300px" class="no-border" >}}
 
-##### Colors
+{{% alert color="warning" %}}
+All changes made in the Chart playground are temporary. To keep your changes, copy the JSON from the playground to the **Custom layout**, **Custom configurations**, or **Custom series options** properties in Studio Pro.
+{{% /alert %}}
 
-Allow to specify list of colors to use in the heat map. Each item define color for value in percentage. At least two values needs to be specified, for 0% and 100%, else the default colors are used.
+{{% 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 %}}
 
-##### Smooth Color
+{{% alert color="info" %}}
+To see available options and useful examples, see Plotly's [JavaScript Figure Reference](https://plotly.com/javascript/reference/index/) guide.
+{{% /alert %}}
 
-If set to **Yes** then show scale as smooth gradient between two colors.
+#### X Axis Label and Y Axis Label {#axis-labels}
 
-##### Show Values
+These two properties set the labels for the X and Y axis.
 
-If set to **Yes** then show value for each dot on chart.
+#### Show Legend {#show-legend}
 
-##### Font Value Color
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/chart-with-legend.png" width="450px" alt="Column chart with Alpha and Beta series. The legend on the right side is highlighted with a red square." class="no-border" >}}
 
-The font color to display values for each dot.
+This setting controls the visibility of a chart's legend block (highlighted in the picture above). If set to **No**, the legend block is hidden.
 
-### Line Chart
+#### Grid Lines {#grid-lines}
 
-#### Edit Series Item dialog
+This property controls the horizontal and vertical grid lines of the chart:
 
-##### Appearance
+* **None** – No grid lines are visible.
+* **Horizontal** – Only horizontal grid lines are visible.
+* **Vertical** – Only vertical grid lines are visible.
+* **Both** – Both horizontal and vertical grid lines are visible.
 
-* **Interpolation** – This determines the line shape: **linear** or **curved**. In **linear** mode dots will be connected using straight lines, in **curved** they will be connected using curved lines.
-* **Line style**
-    * **Line** – Draws a series as a simple line.
-    * **Line with markers** – Draws a line with markers on top of each dot.
-    * **Custom** – A custom line style for a series.
-* **Line color** – The color used to fill line for this data series.
-* **Area fill color** – The color used to fill area for this data series.
+### Dimensions Section {#dimensions}
 
-### Pie Chart
+The **Dimensions** tab sets the size of the chart on the page.
 
-#### Data Source
+#### Width Unit
 
-##### Series Name
+This property sets the unit for the widget width:
 
-This property allows for an expression that when evaluated will return a unique name for a single series:
+* **Percentage** – Width is a percentage of the parent width.
+* **Pixels** – Width is an absolute number of pixels.
 
-{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/pie-chart-series-name-example.png" width="450px" class="no-border" >}}
+#### Width
 
-{{% alert color="warning" %}} 
-This property is required. 
-{{% /alert%}}
+This property sets the width of the widget. The default value is **100**.
 
-##### Value Attribute
+#### Height Unit
 
-The attribute used to retrieve value for an item in the series.
+This property sets the unit for the widget height:
 
-##### Sort Attribute
+* **Percentage of width** – Height is a percentage of the widget width. Use this mode to keep the aspect ratio of the chart.
+* **Pixels** – Height is an absolute number of pixels. This is a good option for most cases.
+* **Percentage of parent** – Height is a percentage of the parent height. This only works when the parent has a CSS `height` value.
 
-The attribute used to sort items in the series.
+#### Height
 
-##### Slice Color
+This property sets the height of the widget. The default value is **75**.
 
-Text template used to get color value for an item. Can use attributes as parameters.
+### Advanced Section {#advanced}
 
-#### General
+The properties in this section are visible only when [Enable advanced options](#enable-advanced-options) is set to **Yes**.
 
-##### Hole Radius
+#### Enable Theme Folder Config Loading {#enable-theme-folder-config}
 
-A percentage between 0 an 100 indicating the radius of the hole in the pice chart relative to the chart itself. Defaults to 0.
+If set to **Yes**, this widget loads global chart settings from the `theme/web/com.mendix.charts.json` file. Before using this feature, make sure this file is present in your app. For more information, see [Use the Charts Theme](/appstore/widgets/charts-theme/).
 
-### Time Series
+#### Custom Layout
 
-#### General
+For more information, see the [Custom Layout](#custom-layout) section below.
 
-##### Show Range Slider
+#### Custom Configurations
 
-If set to **Yes** then show additional range control at the bottom of chart.
+For more information, see the [Custom Configurations](#custom-configurations) section below.
 
-#### Edit Series Item Dialog
+## Chart-Specific Settings {#chart-specific-settings}
 
-##### Appearance
+Each chart type has its own properties in addition to the common properties above. For details, see the page for each chart type:
 
-* **Interpolation** – Determines the line shape. Could be  **linear** or **curved**. In **linear** mode dots will be connected using straight lines, in **curved** they will be connected using curved lines.
-* **Line style**
-    * **Line** – Draws a series as a simple line.
-    * **Line with markers** – Draws a line with markers on top of each dot.
-    * **Custom** – Makes a custom line style for a series.
-* **Line color** – The color used to fill line for this data series.
-* **Fill area** – If set to **Yes** then fill area between data point and x-axis.
-* **Area fill color** – The color used to fill area for this data series.
+* [Area Chart](/appstore/widgets/charts-area-chart/)
+* [Bar Chart](/appstore/widgets/charts-bar-chart/)
+* [Bubble Chart](/appstore/widgets/charts-bubble-chart/)
+* [Column Chart](/appstore/widgets/charts-column-chart/)
+* [Heat Map](/appstore/widgets/charts-heat-map/)
+* [Line Chart](/appstore/widgets/charts-line-chart/)
+* [Pie Chart](/appstore/widgets/charts-pie-chart/)
+* [Time Series](/appstore/widgets/charts-time-series/)
 
 ## Chart Customization {#customization}
 
-### Custom Series Settings
+### Custom Series Settings {#custom-series-settings}
 
-Our underlying graphics library has a flexible API which allows you to configure each series in a chart individually.
+The Plotly library allows you to configure each series in a chart individually.
 
-To navigate to a series' custom settings, do the following:
+To add custom settings to a series, do the following:
 
-1. Go to **Chart settings** > **Data Source** > **Series**. 
+1. On the **General** tab of the chart, set **Enable advanced options** to **Yes**.
+1. On the same tab, go to **Data source** > **Series**.
 1. Select the series you want to configure, then click **Edit**.
-1. Open the **Advanced** tab and paste your custom series settings object there (in JSON format):
+1. Open the **Advanced** tab and paste your custom series settings object in JSON format into **Custom series options**:
+
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-1.png" width="450px" alt="Series list with the first series, Alpha, selected and the Edit button enabled" class="no-border" >}}
 
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-1.png" width="450px" alt="Two dialog boxes. First shows Data source property with list of series records. Second dialog box show settings for the first series in list. Big red arrow pointing to the Advanced tab of the second dialog box." class="no-border" >}}
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-2.png" width="450px" alt="Advanced tab of the Edit Series Item dialog box with a JSON object in Custom series options that sets the line width, line dash, and marker size" class="no-border" >}}
 
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-2.png" width="450px" alt="Settings dialog box window with Advanced tab being active and single textarea element." class="no-border" >}}
+To see available series options, see the [JavaScript Figure Reference](https://plotly.com/javascript/reference/index/) in the Plotly documentation.
 
 ### Custom Layout {#custom-layout}
 
-This property allows you to save your custom **Layout** settings for this widget.
+This property allows you to save custom layout settings for this widget.
 
-To save your custom settings that related to the **Layout** group, navigate to the **Advanced** tab and paste your JSON in **Custom layout** text area:
+To save custom layout settings, go to the **Advanced** tab of the chart and paste your JSON into **Custom layout**:
 
 {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/custom-layout-settings.png" width="450px" alt="Settings dialog box with Advanced tab being active. Tab includes two text area on of which is focused." class="no-border" >}}
 
-These layout settings will be passed to the underlying Plotly JavaScript library. To see available options and their description. Visit the [Layout](https://plotly.com/javascript/reference/#layout) section of the *Plotly Reference Guide*. 
+These layout settings are passed to the Plotly library. To see available options, see the [Layout](https://plotly.com/javascript/reference/#layout) section of the Plotly documentation.
 
 ### Custom Configurations {#custom-configurations}
 
-This property allows you to save your custom **Configuration** settings for this widget.
+This property allows you to save custom configuration settings for this widget.
 
-This object will be merged with default settings and passed to the underlying [Plotly JavaScript](https://plotly.com/javascript/) library. To see available settings and examples check the [Configuration Options in JavaScript](https://plotly.com/javascript/configuration-options/) section of the *Plotly Reference Guide*.
+This object is merged with the default settings and passed to the [Plotly JavaScript](https://plotly.com/javascript/) library. To see available settings and examples, see [Configuration Options in JavaScript](https://plotly.com/javascript/configuration-options/) in the Plotly documentation.
 
 {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/custom-config.png" width="450px" alt="Settings dialog box with Advanced tab being active. Tab includes two text area on of which is focused." class="no-border" >}}
 
 ## Legacy Chart Widget Documentation {#legacy-widget-docs}
 
-{{% alert color="warning" %}}
-This widget is experiencing rendering issues in Studio Pro's **Design mode**. The behavior is under investigation.
-{{% /alert %}}
-
-### Introduction
-
-The [Charts](https://marketplace.mendix.com/link/component/105695/) widget enables plotting and comparing your data across different charts.
-
-These are the available charts:
-
-* Column chart
-* Line chart
-* Pie chart
-* Area chart
-* Bar chart
-* Time series chart
-* Heat chart
-* Bubble chart
-
-### Basic Configuration
-
-#### Line Chart {#line-chart}
-
-A **Line chart** (scatter chart) should have one or more series, each displaying commonly grouped data points.
-
-A series' data can be retrieved from the database or by a microflow:
-
-1. Place the widget in a page.
-2. On the **General** tab, in the **Data source** section, add a **Series** item.
-3. Select either **Single series** or **Multiple series** for **Data set**.
-4. Select the **Data source** for the chart values:
-    * If the **Data source** selected is **Database**, select the entity and optionally change the **XPath constraint**
-    * If the **Data source** selected is **Microflow**, select a **Microflow** that returns the series values
-5. If you set **Multiple series**, one data source provides the data points for every series. Select the attribute to split them on in **Group by**: data points that share a value form one series.
-
-{{% alert color="info" %}}
-The line chart's X-axis provides support for dates, and thus the line chart can be configured as a [time series chart](#time-series).
-{{% /alert %}}
-
-#### Area Chart
-
-The **Area chart** has data properties identical to those of the [Line chart](#line-chart).
-
-#### Column Chart {#column-chart}
-
-The **Column chart** has data properties identical to those of the [Line chart](#line-chart). However, there is no support for the **Date and time** data type.
-
-#### Bar Chart
-
-The **Bar chart** has data properties identical to those of the [Column chart](#column-chart). 
-
-#### Pie Chart {#pie-chart}
-
-Unlike the chart types above, the **Pie chart** takes a single data source instead of a list of series.
-
-These are the properties for configuring Pie chart data, in the **Data source** section of the **General** tab:
-
-* **Series** (required) – the data source from which the slices are retrieved
-* **Series name** (required) – the text template that renders the slice captions
-* **Value attribute** (required) – the attribute that contains the slice values
-* **Sort attribute** – the attribute to use for sorting the slices, combined with **Sort order**
-* **Slice color** – an expression that returns the color of the slice
-
-#### Time Series Chart {#time-series}
-
-The **Time series chart** is a specialised version of the [Line chart](#line-chart), focusing on the X-axis dates. Therefore, it has data properties identical to those of the line chart.
-
-#### Heat Map
-
-The **Heat map** should be configured with required horizontal, vertical, and data attributes.
-
-The sample domain model could be either of the two configurations below:
-
-{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/heat-map.png" class="no-border" >}}
-
-#### Bubble chart
-
-The **Bubble chart** has data properties identical to those of the [Line chart](#line-chart). However, the **Bubble size data** attribute is required, as it contains and determines the size of the bubble.
-
-### Advanced Configuration
-
-The charts in this widget are based on the [mendixlabs/charts](https://github.com/mendixlabs/charts/issues) library. As such, the widget provides support for advanced users to extend or overwrite the basic settings by adding the chart properties as JSON.
-
-To enable this feature, select **Enable advanced options** on the **General** tab. You can then enter JSON in **Custom layout** and **Custom configurations** on the **Advanced** tab. Each series also has a **Custom series options** property in its own **Advanced** section for specialized configurations.
-
-The available advanced options and their usage are described below.
-
-#### Layout Options for All Charts
-
-The layout options control the general appearance of a chart. Common options include `title`, `showlegend`, `xaxis`, and `yaxis`. 
-
-```json
-{
-  "showlegend": true,
-  "legend": {
-    "orientation": "h",
-    "y": "auto"
-  }
-}
-```
-
-#### Configurations Options for All Charts
-
-Configuration options control the appearance of a chart beyond the layout options. Common options include `displayModeBar` and `doubleClick`.
-
-```json
-{
-  "displayModeBar": true,
-  "doubleClick": true,
-  "displaylogo": false
-}
-```
-
-For more details, see the [Advanced Configuration Settings](https://raw.githubusercontent.com/mendixlabs/charts/v1.4.4/AdvancedCheatSheet.md).
-
-#### Data Options for the Pie Chart
-
-On the [Pie chart](#pie-chart), the data options control the appearance of the pie circle beyond the general layout options. Options include `hole`, `name`, and `marker`.
-
-```json
-{
-  "hole": 0.5
-}
-```
-
-For more details, see the [Advanced Configuration Settings](https://raw.githubusercontent.com/mendixlabs/charts/v1.4.4/AdvancedCheatSheet.md).
-
-#### Series Options for the Line and Column Charts
-
-The series options control the appearance of a specific series on the [Line chart](#line-chart) and [Column chart](#column-chart). Options include `line color` and `line shape`.
-
-For the full Plotly API reference, see [JavaScript Figure Reference](https://plot.ly/javascript/reference/).
-
-#### Theme-Based Advanced Configuration
-
-The settings above can also be added in a global context via the **theme** folder of your Mendix app root directory.
-
-Add a *.json* file named *com.mendix.charts* to the **theme** folder. The JSON should be in the following format:
-
-```json
-{
-  "layout": {
-    // Add shared layout options here (for all charts)
-  },
-  "configuration": {
-    // Add shared configuration options here (for all charts)
-  },
-  "charts": {
-    "LineChart": {
-      "layout": {
-        // Add line chart only layout options here
-      },
-      "data": {
-        // Add line chart only data options here
-      },
-      "configuration": {
-          // Add line chart only configuration options here
-      }
-    },
-    "AreaChart": {
-      // Same arrangement as the line chart
-    },
-    "BubbleChart": {
-      // Same arrangement as the line chart
-    },
-    "TimeSeries": {
-      // Same arrangement as the line chart
-    },
-    "ColumnChart": {
-      // Same arrangement as the line chart
-    },
-    "BarChart": {
-      // Same arrangement as the line chart
-    },
-    "PieChart": {
-      // Same arrangement as the line chart
-    },
-    "HeatMap": {
-      // Same arrangement as the line chart
-    }
-  }
-}
-```
-
-{{% alert color="warning" %}}
-Use this with caution, as the configs set up here shall be applied to every instance of the charts in your application. Only the advanced configurations set up in the widget itself have a higher precedence.
-{{% /alert %}}
-
-### Read More
-
-* [Charts Configuration](/refguide/charts-configuration/)
+Charts versions below 3.0.0 use a different set of properties, such as the **Data points** tab, the REST endpoint data source, and the **Mode** option. For the configuration options of these versions, see [Chart Configuration](/refguide/charts-configuration/) and [Advanced Configuration Settings](https://raw.githubusercontent.com/mendixlabs/charts/v1.4.4/AdvancedCheatSheet.md) in the mendixlabs/charts repository.
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/chart-playground.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/chart-playground.md
new file mode 100644
index 00000000000..ec462924865
--- /dev/null
+++ b/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/)
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-advanced-tuning.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-advanced-tuning.md
index 7beef10f1a6..b7f406333f7 100644
--- a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-advanced-tuning.md
+++ b/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/)
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-any-usage.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-any-usage.md
index f8a4e71d1fa..8b8538209d4 100644
--- a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-any-usage.md
+++ b/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. 
 
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-area-chart.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-area-chart.md
new file mode 100644
index 00000000000..9fd80264fd6
--- /dev/null
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-area-chart.md
@@ -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.
+
+## Edit Series Item Dialog Box – 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/)
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-bar-chart.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-bar-chart.md
new file mode 100644
index 00000000000..75beb0f41a8
--- /dev/null
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-bar-chart.md
@@ -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" >}}
+
+## Edit Series Item Dialog Box – 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/)
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-create.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-create.md
index 7adda36ffd4..157d3f4dfce 100644
--- a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-create.md
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-create.md
@@ -9,19 +9,18 @@ aliases:
 
 ## Introduction
 
-The charts widget provides a basic implementation of different types of chart (for example: area, line, bar, column, and pie) in a Mendix application.
+The [Charts](/appstore/widgets/charts/) module provides widgets for different types of charts (for example, area, line, bar, column, and pie) in a Mendix application.
 
 This how-to teaches you how to do the following:
 
 * Create a chart with basic sample data
-
 * Configure the chart display options
 
 ## Prerequisites
 
 Before starting this how-to, make sure you have completed the following prerequisites:
 
-* Download the latest [Charts Widget](/appstore/widgets/charts/) from the Mendix Marketplace
+* Download the latest [Charts](https://marketplace.mendix.com/link/component/105695/) module from the Mendix Marketplace
 
 ## Implementing the Charts Widget in an Existing App
 
@@ -40,7 +39,7 @@ To use the Charts widget, a specific data structure is set up. This is defined b
 
 To create a basic data entry page from which the Charts widget will fetch data, follow these steps:
 
-1. Right Click on value entity.
+1. Right-click the **Value** entity.
 2. Select **Generate overview pages**.
 
     {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-rest-generate-overview-pages.png" alt="Generate overview pages for Value entity" class="no-border" >}}
@@ -51,32 +50,22 @@ To create a basic data entry page from which the Charts widget will fetch data,
 
 1. Create a page named *ShowChart*.
 2. Add it to the user navigation.
-3. Add a **Data view** to this page that contains the **Value** entity and has a microflow as a data source.
-4. Create a new microflow named **DS_NewValue** to fill the data view.
-
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-create-new-value.png" alt="Data view showing the Value entity" class="no-border" >}}
-
-5. Right-click the data view and select **Go to microflow**.
-6. In the new **DS_NewValue** microflow, create a new *Value* object and set that object as the return.
-
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-new-values-microflow.png" alt="New Value microflow" class="no-border" >}}
-
-7. On the ShowChart page, add the widget **Area chart**.
+3. On the ShowChart page, add the widget **Area chart**.
 
     {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-select-chart.png" alt="Select widget" class="no-border" >}}
 
-8. The final page should look like this.
+4. The final page should look like this.
 
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-widget-page.png" alt="Final widget Page" class="no-border" >}}
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-widget-page.png" alt="Area chart widget on the ShowChart page in Studio Pro, showing sample data for three series" class="no-border" >}}
 
 ### Configuring the Charts Widget
 
 To configure a Charts widget, follow these steps:
 
 1. Open the page with the Charts widget.
-2. Right-click the **Area chart** and select **Properties**.
-3. On the **General** tab, in the **Data source** section, add a new **Series** item.
-4. In the **General** section of the series, leave **Data set** set to **Single series**.
+2. Double-click the **Area chart** widget to open its properties.
+3. On the **General** tab, in the **Data source** section, click **New** in the **Series** list. The **Edit Series Item** dialog box opens.
+4. On the **General** tab of the dialog box, leave **Data set** set to **Single series**.
 5. Set **Data source** to **Database** and select the *Value* entity.
 6. Select *xValue* as the **X axis attribute** and *yValue* as the **Y axis attribute**.
 
@@ -98,6 +87,6 @@ To view the chart, follow these steps:
 ## Read More
 
 * [Create a Multiple Series Chart](/appstore/widgets/charts-dynamic-series/)
-* [Use a Chart With a REST Data Source](/appstore/widgets/charts-basic-rest/)
+* [Use a Chart with a REST Data Source](/appstore/widgets/charts-basic-rest/)
 * [Use Any Chart](/appstore/widgets/charts-any-usage/)
-* [Use Charts Themes](/appstore/widgets/charts-theme/)
+* [Use the Charts Theme](/appstore/widgets/charts-theme/)
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-rest.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-rest.md
index fa5cc3c7734..035b3e5fa4b 100644
--- a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-rest.md
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-rest.md
@@ -11,7 +11,7 @@ aliases:
 
 With the Charts widget, you can plot data that comes from a REST service.
 
-The widget does not call a REST service itself. Its data source accepts a database query (a microflow, a nanoflow, or an association) so you retrieve the REST data in a microflow and point the chart at that microflow.
+The widget does not call a REST service itself. Its data source can be **Database**, **Microflow**, **Nanoflow**, or **Association**, so you retrieve the REST data in a microflow and use that microflow as the data source.
 
 This how-to teaches you how to do the following:
 
@@ -43,7 +43,7 @@ For more information on publishing a REST API refer to this Mendix document: [Pu
 1. Open the Domain model.
 1. Create **Value** and **Series** entities with the attributes and association shown in the picture below.
     {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-rest/charts-rest-domain.png" alt="Chart Rest Domain" class="no-border" >}}  
-1. Right-click **Value** and select **Generate overview pages...**.
+1. Right-click **Value** and select **Generate overview pages**.
     {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-rest-generate-overview-pages.png" alt="Chart Rest Enter Data" class="no-border" >}}
 1. Add the **Value_NewEdit** page generated to your navigation.
 1. Run the app.
@@ -92,8 +92,8 @@ To plot the retrieved data, follow these steps:
 
 1. Create a page in your app containing an **Area chart** widget.
 1. Double-click the **Area chart** widget to open its properties.
-1. On the **General** tab, in the **Data source** section, add a new **Series** item.
-1. In the **General** section of the series, leave **Data set** set to **Single series**.
+1. On the **General** tab, in the **Data source** section, click **New** in the **Series** list. The **Edit Series Item** dialog box opens.
+1. On the **General** tab of the dialog box, leave **Data set** set to **Single series**.
 1. Set **Data source** to **Microflow** and select *DS_ValuesFromREST*.
 1. Set **Series name** to the text that should appear in the legend.
 1. Select the **X axis attribute** and the **Y axis attribute**.
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-bubble-chart.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-bubble-chart.md
new file mode 100644
index 00000000000..0e944534413
--- /dev/null
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-bubble-chart.md
@@ -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.
+
+## Edit Series Item Dialog Box – 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**.
+
+## Edit Series Item Dialog Box – 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/)
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-column-chart.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-column-chart.md
new file mode 100644
index 00000000000..ae3450e03d8
--- /dev/null
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-column-chart.md
@@ -0,0 +1,32 @@
+---
+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." title="Two format types of column chart, where group format is present on the left and stack format is present on the right." class="no-border" >}}
+
+## Edit Series Item Dialog Box – 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/)
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-custom-usage.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-custom-usage.md
index b6642e89b9e..b730dcfc71c 100644
--- a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-custom-usage.md
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-custom-usage.md
@@ -1,8 +1,8 @@
 ---
 title: "Use Custom Chart"
 url: /appstore/widgets/charts-custom-usage/
-weight: 20
-description: "How to use the Custom Chart widget to create advanced charts"
+weight: 15
+description: "How to use the Custom chart widget to create advanced charts with Plotly JSON, and a reference of its properties."
 aliases:
     - /howto/front-end/charts-custom-usage/
 ---
@@ -11,7 +11,7 @@ aliases:
 
 The basic charts provide a set of easy to configure charts such as line, bar, column, pie, and so forth. These charts can be fine tuned with the advanced options.
 
-When the advanced options are not enough, starting from charts version 6.0 and higher, the **Custom Chart** widget can be used.
+When the advanced options are not enough, use the **Custom Chart** widget, available in Charts version 6.0.0 and above.
 
 With **Custom Chart** you can build all the chart types that are possible with Plotly.js as well as options for configuring charts dynamically. So, if you want to build a 3D chart or have a dynamic set of series, **Custom Chart** is your friend.
 **Custom Chart** is a successor of **Any Chart** module that is compatible with **React client** mode.
@@ -27,14 +27,20 @@ This how-to teaches you how to do the following:
 Before starting this how-to, make sure you have the following prerequisites:
 
 * The latest version of Mendix Studio Pro
-* The latest [Chart](/appstore/widgets/charts/) widget
+* The latest [Charts](https://marketplace.mendix.com/link/component/105695/) module
 * An understanding of JSON data structures
 
-## Chart Structure
+## Chart Structure {#chart-structure}
 
 A **Custom Chart** widget can be configured with a JSON **Data** array and **Layout** object. The configuration can be set statically, via the **Source attribute** or with the **Sample data**.
 
-The configuration in the **Source attribute** will be merged into the static settings and will overwrite any common properties. The **Sample data** is for demo purposes at run time when there is no **Source** attribute selected or when rendering sample data in the Studio Pro preview.
+The configuration in the **Source attribute** is merged into the static settings and overwrites any common properties. The **Sample data** is for demo purposes: it is used in the Studio Pro preview, and at runtime when no **Source attribute** is selected.
+
+Data traces are merged by their position in the array. The first trace in the **Source attribute** is merged with the first trace in **Static**, the second with the second, and so on. When both have a value for the same property, the value from the **Source attribute** wins.
+
+{{% alert color="info" %}}
+In Charts versions below 6.3.0, the traces from the **Source attribute** were added after the **Static** traces as separate traces, instead of being merged by position.
+{{% /alert %}}
 
 ## Creating a Chart
 
@@ -64,11 +70,11 @@ To create a line chart with the **Custom Chart** widget, follow these steps:
     [ { "x": [ 1, 2 ], "y": [ 1, 2 ] } ]
     ```
 
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/any-chart-configuration.png" alt="Any Chart Configuration" class="no-border" >}}
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/custom-chart-configuration.png" alt="Data tab of the Custom chart properties with the Static and Sample data JSON filled in" max-width="80%" class="no-border" >}}
 
 7. Run the app to preview the chart.
 
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/charts-any-sample.png" alt="Any Chart result" class="no-border" >}}
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/custom-chart-sample.png" alt="Line chart with one line from point 1,1 to point 2,2" class="no-border" >}}
 
 ## Exporting Data
 
@@ -89,32 +95,58 @@ 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. 
 
-See [Chart advanced tuning](/appstore/widgets/chart-advanced-tuning/) for more information on fine tuning **Custom Chart** with using **Chart Playground** widget.
+For more information on fine-tuning **Custom Chart** with the Chart playground widget, see [Chart Playground](/appstore/widgets/chart-playground/).
 
 {{% alert color="info" %}}
-Since the introduction of design mode, react-ready widgets can render data as it is entered. This makes it possible for user to see Static data and configurations directly in design mode without the needs of running the apps.
+In the Studio Pro page editor, the chart renders the **Static** and **Sample** data and layout as you enter them. This lets you check your configuration without running the app.
 {{% /alert %}}
 
-## Dimension
+## Properties {#properties}
+
+### Data Tab
+
+* **Static** – A JSON array of traces. For the available options, see the [JavaScript Figure Reference](https://plotly.com/javascript/reference/) in the Plotly documentation.
+* **Source attribute** – A string attribute that contains a JSON array of traces. These traces are merged with the **Static** data by position, as described in [Chart Structure](#chart-structure).
+* **Sample data** – A JSON array of traces used for the preview in Studio Pro, and at runtime when no **Source attribute** is selected. It is merged with the **Static** data.
+* **Show playground slot** – If set to **Yes**, the chart shows a **Playground slot** for a [Chart playground](/appstore/widgets/chart-playground/) widget.
+
+### Layout Options Tab
+
+* **Static** – A JSON object with the layout of the chart. For the available options, see [Layout](https://plotly.com/javascript/reference/layout/) in the Plotly documentation.
+* **Source attribute** – A string attribute that contains a JSON layout object. It is merged with the **Static** layout and overwrites it.
+* **Sample layout** – A JSON layout object used for the preview in Studio Pro, and at runtime when no **Source attribute** is selected. It is merged with the **Static** layout.
+
+### Configuration Options Tab
+
+* **Configuration options** – A JSON object with the Plotly configuration options. For the available options, see [Configuration Options](https://plotly.com/javascript/configuration-options/) in the Plotly documentation.
+
+### Dimensions Tab
+
+* **Width unit** – **Percentage** of the parent width, or **Pixels**.
+* **Width** – The width of the chart. The default value is **100**.
+* **Height unit**:
+    * **Auto** – The height is set automatically. Use **Minimum height** and **Maximum height** to limit it.
+    * **Pixels** – The height is an absolute number of pixels.
+    * **Percentage** – The height is a percentage of the parent height.
+    * **Viewport** – The height is a percentage of the viewport height.
+* **Height** – The height of the chart. The default value is **100**. This property is not visible when **Height unit** is set to **Auto**.
 
-These are the dimension configurations for custom charts:
+When **Height unit** is set to **Auto**, these properties are also available:
 
-* **Width** – Determines the width size for the custom charts. User can choose to use either pixels (px) or percentage (%).
-* **Height** – Determine the height size for the custom charts. User can choose to use either pixels (px), percentage (%), or Viewport (vh). Choosing setting to **Auto** will allow user to set minimum and maximum height instead.
-* **Minimum Height** – Determines the minimum size for the custom charts container.
-* **Maximum Height** – Determines the maximum size for the custom charts container.
-* **Vertical Overflow** – If maximum height is set, vertical overflow will determine the widget's behavior to show overflowing content if it reached height size larger than the maximum height allowed.
+* **Minimum Height unit** and **Minimum height** – The minimum height of the chart container: **None**, **Pixels**, **Percentage**, or **Viewport**.
+* **Maximum Height unit** and **Maximum height** – The maximum height of the chart container: **None**, **Pixels**, **Percentage**, or **Viewport**.
+* **Vertical Overflow** – What happens when the content is higher than the maximum height: **Auto**, **Scroll**, or **Hidden**. This property is visible only when a maximum height is set.
 
-## Events
+### Events Tab
 
-* **On Click** – Determines the actions that will be triggered if parts of the custom charts is clicked.
-* **Event data attribute** – The string value that the chart uses when click events occur. User can use this same attribute as the parameters for on-click events action to retrieve the data from the custom chart:
+* **On click** – The action that runs when the user clicks a part of the chart.
+* **Event data attribute** – A string attribute in which the chart stores the raw Plotly event data when the user clicks the chart. You can use this attribute in the **On click** action to read which part of the chart was clicked. For the format of the data, see [Event Data](https://plotly.com/javascript/plotlyjs-events/#event-data) in the Plotly documentation.
 
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/custom-chart-events-attribute.png" alt="Setup on click events" class="no-border" >}}
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/custom-chart-events-attribute.png" alt="On click action that uses the event data attribute" class="no-border" >}}
 
 ## Read More
 
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-dynamic-series.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-dynamic-series.md
index c63d39e7bfe..9f8174bde3c 100644
--- a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-dynamic-series.md
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-dynamic-series.md
@@ -40,7 +40,7 @@ The **Group by** property can only use an attribute of the entity the data sourc
 Now you need to enter data for the chart.
 
 1. Right-click the **Value** entity.
-1. Choose **Generate overview pages...**.
+1. Choose **Generate overview pages**.
 1. Connect the **Value_Overview** page to the navigation.
 1. Click **Run Locally** ({{% icon name="controls-play" %}}) to run the app locally.
 1. Enter some sample data. Give every data point that belongs to the same line the same **seriesName** value.
@@ -60,15 +60,15 @@ Now you need to create a page containing the chart.
 To configure a chart that builds its series from the data, follow these steps:
 
 1. Double-click the **Area chart** widget to open its properties.
-1. On the **General** tab, in the **Data source** section, add a new **Series** item.
-1. In the **General** section of the series, set **Data set** to **Multiple series**.
+1. On the **General** tab, in the **Data source** section, click **New** in the **Series** list. The **Edit Series Item** dialog box opens.
+1. On the **General** tab of the dialog box, set **Data set** to **Multiple series**.
 1. Set **Data source** to **Database** and select the **Value** entity. This is the entity from which all data points are retrieved.
 1. Set **Group by** to **seriesName**. Data points that share a value form one series.
 1. Set **Series name** to a text template that renders the label shown in the legend, for example the **seriesName** attribute. The name is taken from the first data point in each group.
 1. Set **X axis attribute** to **xValue** and **Y axis attribute** to **yValue**.
 1. Optionally, set **Aggregation function** to combine data points when several Y values share the same X value.
 
-To give the series distinct colors, use the **Appearance** section of the series. **Line color**, **Marker color**, and **Area fill color** are expressions that return a color string, and each is evaluated against the first data point of the group, so the value applies to the whole series. For example, store a color on the **Value** entity and enter `$currentObject/color` as the expression.
+To give the series distinct colors, use the **Appearance** tab of the **Edit Series Item** dialog box. **Line color**, **Marker color**, and **Area fill color** are expressions that return a color string, and each is evaluated against the first data point of the group, so the value applies to the whole series. For example, store a color on the **Value** entity and enter `$currentObject/color` as the expression.
 
 ## Viewing the Chart
 
@@ -77,7 +77,7 @@ To view the chart, follow these steps:
 1. Run the app (locally).
 1. Open the page containing the chart.
 
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-dynamic-series/charts-dynamic-series-chart.png" alt="Area chart showing one line for each series name found in the data" class="no-border" >}}
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-dynamic-series/charts-dynamic-series-chart.png" alt="Stacked area chart with one area for each series name found in the data: Alpha, Beta, and Gamma" class="no-border" >}}
 
 ## Read More
 
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-heat-map.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-heat-map.md
new file mode 100644
index 00000000000..b33cfabf17a
--- /dev/null
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-heat-map.md
@@ -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/)
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-line-chart.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-line-chart.md
new file mode 100644
index 00000000000..9647c01b37d
--- /dev/null
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-line-chart.md
@@ -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.
+
+## Edit Series Item Dialog Box – 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/)
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-pie-chart.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-pie-chart.md
new file mode 100644
index 00000000000..c61ae2fea93
--- /dev/null
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-pie-chart.md
@@ -0,0 +1,59 @@
+---
+title: "Pie Chart"
+url: /appstore/widgets/charts-pie-chart/
+weight: 160
+description: "Describes the properties of the Pie Chart widget in the Charts module."
+---
+
+## Introduction
+
+A pie chart shows the values of one data source as slices of a circle. With a hole in the middle, it becomes a doughnut chart.
+
+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 pie chart.
+
+The pie chart does not use a series list. It uses one data source, and each object in it becomes one slice.
+
+## Data Source Section
+
+### Series
+
+This required property is the data source for the slices of the pie chart.
+
+### Series Name
+
+This required property is a text template that returns a unique name for each slice:
+
+{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/pie-chart-series-name-example.png" alt="Data source section of a pie chart with a microflow data source and the Series name text template {1}" width="450px" class="no-border" >}}
+
+### Value Attribute
+
+This required property is the attribute used to get the value for each slice.
+
+### Sort Attribute and Sort Order
+
+The attribute used to sort the slices, and the sort order: **Ascending** or **Descending**.
+
+### Slice Color
+
+An expression that returns the color of each slice. You can use attributes of the object in the expression.
+
+### Selection Type
+
+Set to **Single** to let users select a slice. Other widgets can then listen to the selection.
+
+## General Section
+
+### Hole Radius
+
+A percentage between 0 and 100 that sets the radius of the hole in the middle of the chart, relative to the chart itself. Set to **0** for a pie chart, or to a higher value for a doughnut chart. The default value is **0**.
+
+The pie chart also has the **Show legend** property described in [General Section](/appstore/widgets/charts/#general), and a **Tooltip hover text** property for the message shown when the user hovers over a slice.
+
+## Events Section
+
+* **On click action** – The action that runs when the user clicks a slice.
+
+## Read More
+
+* [Charts](/appstore/widgets/charts/)
+* [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/)
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-theme.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-theme.md
index df744e7ce04..4fbc84642be 100644
--- a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-theme.md
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-theme.md
@@ -2,49 +2,42 @@
 title: "Use the Charts Theme"
 url: /appstore/widgets/charts-theme/
 weight: 40
-description: "Hos to set up a theme which will be applied to all the charts created with charts widgets in an app"
+description: "How to set up a theme file that applies settings to all charts created with the Charts module in an app."
 aliases:
     - /howto/front-end/charts-theme/
 ---
 
 ## Introduction
 
-The look of individual **Charts** widgets can be fine tuned with advanced settings. A theme allows developers to create global settings that apply to all charts. In this way color, language, font and many more things can be set for all the charts in an app.
+You can fine-tune the look of individual Charts widgets with their advanced settings. A theme file lets you create global settings that apply to all charts in an app. In this way, you can set colors, language, fonts, and many other things for all charts at once.
 
 This how-to teaches you how to do the following:
 
-* Change the font style for all charts
-* Add a theme configuration
+* Find the settings you want with the Chart playground
+* Add a theme configuration file
+* Change the font for all charts
 
 ## Prerequisites
 
 Before starting this how-to, make sure you have completed the following prerequisites:
 
-* Download the latest [Chart Widget](/appstore/widgets/charts/) from the Mendix Marketplace
-* Set up a chart: see [How to create a charts](/howto/front-end/charts-basic-create/)
+* 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/)
 
 ## Creating a Chart Theme
 
 This is how the original chart looks:
 
-{{< 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" >}}
 
-### Creating an Advanced Custom Configuration
+### Finding the Settings with Chart Playground
 
-To create the required custom configuration easily, follow these steps:
+To find the settings you want, follow these steps:
 
-1. Open the app with the chart (or charts).
-1. Open a page with a chart.
-1. Open the chart settings.
-1. Go to the tab **Advanced**.
-1. Set the **Mode** to **Developer**.
-
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-properties-advanced.png" alt="chart widget properties" class="no-border" >}}
-
-1. Run the app.
-1. Open the page with the chart in the browser.
-1. Click the **Toggle Editor** button.
-1. In the **Layout** section add the **Custom settings**.
+1. Add a [Chart playground](/appstore/widgets/chart-playground/) to your chart, as described in [Opening the Playground](/appstore/widgets/chart-advanced-tuning/#open-playground).
+1. Run the app and open the page with the chart in the browser.
+1. Click **Toggle Editor**.
+1. In the drop-down list, select **Layout**, and add the following JSON to **Custom settings**:
 
     ```json
     {
@@ -56,36 +49,36 @@ To create the required custom configuration easily, follow these steps:
     }
     ```
 
-1. Change the font settings, till the chart shows the required font.
+1. Change the font settings until the chart shows the font you want, then copy the JSON.
 
-    {{< 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" >}}
 
-    {{% alert color="warning" %}}Please note that the editor changes will not persist. They need to be stored in the advanced settings of the widget or stored in the theme.{{% /alert %}}
+    {{% alert color="warning" %}}Changes made in the playground do not persist. Store them in the advanced settings of the widget or in the theme file.{{% /alert %}}
 
-1. In Studio Pro, set **Mode** in the chart to **Advanced**, to remove the Toggle Editor button.
-
-    {{% alert color="warning" %}}Please note that the theme settings only apply to charts in Advanced or Developer mode.{{% /alert %}}
+1. In Studio Pro, remove the Chart playground from the chart, as described in [Removing the Playground](/appstore/widgets/chart-advanced-tuning/#remove-playground).
 
 ### Adding a Theme Configuration
 
-To add a theme file which will apply to all charts in the app, follow these steps:
+To add a theme file that applies to all charts in the app, follow these steps:
+
+1. In Studio Pro, go to **App** > **Show App Directory in Explorer** (or **Show App Directory in Finder** on macOS).
+1. Open the *[YOUR-APP]/theme/web* folder (or *[YOUR-APP]/theme/native* if using native apps).
+1. Create a new file named *com.mendix.charts.json*.
 
-1. From Studio Pro, go to the menu **App** > **Show App Directory in Explorer**.
-1. Open the **theme** folder.
-1. Create a new file: *com.mendix.charts.json*
+    {{% alert color="info" %}}The file name is case-sensitive, and the file extension is *.json*. The file must contain a JSON object, even if it is empty, for example `{ }`.{{% /alert %}}
 
-    {{% alert color="info" %}}Please note that<br/>
-    * the file name is case sensitive<br/>
-    * the file extension is `json`<br/>
-    * the file must contain a *json* object, even if this is empty—for example `{ }`
-    {{% /alert %}}
+1. For each chart that should use the theme, open the chart properties, set **Enable advanced options** to **Yes** on the **General** tab, then go to the **Advanced** tab and set **Enable theme folder config loading** to **Yes**.
+
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-theme/charts-enable-theme-config.png" alt="Advanced tab of the chart properties with Enable theme folder config loading set to Yes" width="450px" class="no-border" >}}
+
+    {{% alert color="info" %}}Charts that have **Enable theme folder config loading** set to **No** ignore the theme file.{{% /alert %}}
 
 ### Changing the Font Globally
 
 To change the font in all charts in the app, follow these steps:
 
-1. Edit the *[app folder]/theme/com.mendix.charts.json* file in a plain text editor.
-1. Replace or update the content. In the **layout** section, place the style changes that were created in the first section of this how to.
+1. Open the *[app folder]/theme/web/com.mendix.charts.json* file in a plain text editor.
+1. Replace or update the content. In the `layout` section, place the font settings that you found in the playground:
 
     ```json
     {
@@ -100,12 +93,55 @@ To change the font in all charts in the app, follow these steps:
     ```
 
 1. Restart the Mendix app.
-1. Validate the expected result.
+1. Check the result.
+
+    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-theme/charts-toggle-editor-changed.png" alt="Line chart whose axis labels use the Impact font from the theme file" class="no-border" >}}
+
+## Theme File Structure {#theme-file-structure}
+
+The theme file can contain three top-level properties. At least one of them must be present; otherwise, the file is ignored and a warning is logged in the browser console.
+
+* `layout` – Layout settings applied to all charts. For available options, see [Layout](https://plotly.com/javascript/reference/layout/) in the Plotly documentation.
+* `configuration` – Configuration settings applied to all charts. For available options, see [Configuration Options](https://plotly.com/javascript/configuration-options/) in the Plotly documentation.
+* `charts` – Series settings per chart type. Each key is a chart type, and its value is applied to every series of that chart type. For available options, see the [JavaScript Figure Reference](https://plotly.com/javascript/reference/) in the Plotly documentation. The possible keys are `AreaChart`, `BarChart`, `BubbleChart`, `ColumnChart`, `HeatMap`, `LineChart`, `PieChart`, and `TimeSeries`.
+
+This is an example of a theme file:
+
+```json
+{
+  "layout": {
+    "font": {
+      "family": "Open Sans",
+      "size": 14
+    }
+  },
+  "configuration": {
+    "displayModeBar": false
+  },
+  "charts": {
+    "LineChart": {
+      "line": {
+        "width": 3
+      }
+    },
+    "BarChart": {
+      "opacity": 0.8
+    }
+  }
+}
+```
+
+{{% alert color="warning" %}}
+Use this with caution, because the settings in the theme file apply to every chart in your app that has **Enable theme folder config loading** set to **Yes**. The **Custom layout**, **Custom configurations**, and **Custom series options** set in the widget itself take precedence over the theme file.
+{{% /alert %}}
 
-    {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-theme/charts-toggle-editor-changed.png" alt="chart updated" class="no-border" >}}
+{{% alert color="info" %}}
+The theme file is not used by the [Custom chart](/appstore/widgets/charts-custom-usage/) widget.
+{{% /alert %}}
 
 ## Read More
 
-* [Charts](/refguide/chart-widgets/)
+* [Charts](/appstore/widgets/charts/)
+* [Chart Playground](/appstore/widgets/chart-playground/)
 * [Layout samples](/refguide/charts-advanced-cheat-sheet/#layout-all)
 * [Configuration samples](/refguide/charts-advanced-cheat-sheet/#config-options)
diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-time-series.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-time-series.md
new file mode 100644
index 00000000000..ca845cacbb0
--- /dev/null
+++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-time-series.md
@@ -0,0 +1,55 @@
+---
+title: "Time Series"
+url: /appstore/widgets/charts-time-series/
+weight: 170
+description: "Describes the properties of the Time Series widget in the Charts module."
+aliases:
+    - /appstore/widgets/time-series-chart/
+---
+
+## Introduction
+
+A time series shows one or more series as lines over a date and time X axis.
+
+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 time series.
+
+The **X axis attribute** of a time series must be of the **Date and time** type.
+
+## General Section
+
+### Show Range Slider
+
+If set to **Yes**, an additional range control is shown at the bottom of the chart. The default value is **Yes**.
+
+## Advanced Section
+
+### Y-Axis Range Mode
+
+This property controls the range of the Y axis:
+
+* **Auto** – The range is based on the plotted values.
+* **From zero** – The Y axis starts from zero. This is the default value.
+* **Non-negative** – The Y axis only shows positive values.
+
+## Edit Series Item Dialog Box – 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**.
+* **Fill area** – If set to **Yes**, the area between the data points and the X axis is filled. The default value is **Yes**.
+* **Area color** – The color of the filled area. By default, the line color with transparency is used. This property is visible only when **Fill area** is set to **Yes**.
+
+{{% alert color="info" %}}
+On a time series, the color properties are text templates, not expressions.
+{{% /alert %}}
+
+## Read More
+
+* [Charts](/appstore/widgets/charts/)
+* [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/)
diff --git a/content/en/docs/refguide/modeling/domain-model/entities/view-entities/charting-with-view-entities.md b/content/en/docs/refguide/modeling/domain-model/entities/view-entities/charting-with-view-entities.md
index 8f8415a4186..37e07d8bbde 100644
--- a/content/en/docs/refguide/modeling/domain-model/entities/view-entities/charting-with-view-entities.md
+++ b/content/en/docs/refguide/modeling/domain-model/entities/view-entities/charting-with-view-entities.md
@@ -2,6 +2,7 @@
 title: "Charting with View Entities"
 url: /refguide/charting-with-view-entities/
 weight: 40
+description: "Describes how to use view entities to create charts with aggregated data."
 ---
 
 ## Introduction
@@ -12,11 +13,11 @@ You can use view entities to create charts in Studio Pro. This process uses aggr
 
 For this purpose of this use case, the following domain model is used:
 
-{{< figure src="/attachments/refguide/modeling/domain-model/view-entities/charting-with-view-entities/domain-model.png" width="500" >}}
+{{< figure src="/attachments/refguide/modeling/domain-model/view-entities/charting-with-view-entities/domain-model.png" alt="Domain model with Product, Category, OrderLine, and Order entities and their associations" width="500" >}}
 
 For example, you own a small business. To keep track of what is being sold, you want to visualize your sales. You want to see how much you make in sales each year, and how each product category contributes to the number. You would like your chart to look similar to the one below:
 
-{{< figure src="/attachments/refguide/modeling/domain-model/view-entities/charting-with-view-entities/chart-example.png" width="500" >}}
+{{< figure src="/attachments/refguide/modeling/domain-model/view-entities/charting-with-view-entities/chart-example.png" alt="Stacked column chart of yearly sales by product category for 1996, 1997, and 1998" width="500" >}}
 
 ### Create a View Entity
 
@@ -65,11 +66,11 @@ Use the new view entity to create a chart. Follow the steps below:
     * In the **Series name** field, click **Edit** and add **{1}** in the **Template** field. 
     * In the **Parameters** field, click **New** > **Select** > **CategoryName** > **Select** > **OK**.
 
-    {{< figure src="/attachments/refguide/modeling/domain-model/view-entities/charting-with-view-entities/series-name.png" width="400" >}}
+    {{< figure src="/attachments/refguide/modeling/domain-model/view-entities/charting-with-view-entities/series-name.png" alt="Edit Series name dialog box with the template {1} and the parameter CategoryName" width="400" >}}
 
     The chart should be configured as seen below: 
 
-    {{< figure src="/attachments/refguide/modeling/domain-model/view-entities/charting-with-view-entities/chart-final.png" width="400" >}}
+    {{< figure src="/attachments/refguide/modeling/domain-model/view-entities/charting-with-view-entities/chart-final.png" alt="Column chart properties with a Multiple series data set, axis labels, and Column format set to Stacked" width="400" >}}
 
 6. Click **OK** to save.
 
diff --git a/content/en/docs/refguide/modeling/pages/chart-widgets/_index.md b/content/en/docs/refguide/modeling/pages/chart-widgets/_index.md
index 758212803a4..4b299baacc6 100644
--- a/content/en/docs/refguide/modeling/pages/chart-widgets/_index.md
+++ b/content/en/docs/refguide/modeling/pages/chart-widgets/_index.md
@@ -3,57 +3,50 @@ title: "Charts"
 url: /refguide/chart-widgets/
 weight: 70
 no_list: false
-description_list: true 
+description_list: true
+description: "Describes the chart widgets you can use on your app pages."
 ---
 
 ## Introduction
 
 Charts allow you to display data series visually on your app pages in a wide range of charts.
 
-[Basic Charts](#basic-charts) are included in Mendix app templates based on Atlas UI. They can be included in other Mendix apps by downloading them from the Mendix Marketplace (for more information on various charts and their configurations, see [Charts](/appstore/widgets/charts/)). Basic charts are based on plotly.js 3.x as of Charts widget version 6.0.0. For the exact plotly.js version in the release you are using, see the [Charts](https://marketplace.mendix.com/link/component/105695/) listing in the Mendix Marketplace.
+The chart widgets are part of the [Charts](https://marketplace.mendix.com/link/component/105695/) module, which you can download from the Mendix Marketplace. The widgets are based on the [Plotly JavaScript](https://plotly.com/javascript/) library. For the configuration of the chart widgets, see [Charts](/appstore/widgets/charts/) in the *Marketplace Guide*.
 
-[Any Chart](#any-chart) gives much more control and allows more flexible use of the features of [plotly.js](https://plot.ly/). The [Any Chart](/appstore/modules/any-chart/) widget can be included in your app. See the widget description in the Marketplace to see what version of plotly.js is supported.
+## Chart Types {#basic-charts}
 
-## Basic Charts {#basic-charts}
+The Charts module contains these chart widgets:
 
-With Mendix Charts you can quickly create beautiful charts. The following charts are included:
+* **Area** chart – a line chart with a fill to the X-axis {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-area-chart.png" alt="Area chart with three stacked series"   width="200"  class="no-border" >}}
+* **Bar** chart – horizontal bars, grouped or stacked {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-bar-chart.png" alt="Horizontal bar chart with three grouped series" width="200" class="no-border" >}}
+* **Bubble** chart – add a size dimension to your chart {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-bubble-chart.png" alt="Bubble chart with three series of different-sized bubbles" width="200" class="no-border" >}}
+* **Column** chart – vertical bars, grouped or stacked {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-column-chart.png" alt="Column chart with two grouped series" width="200" class="no-border" >}}
+* **Heat map** – show data values by color in a 2D matrix {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-heat-map.png" alt="Heat map with a grid of colored cells and a color scale" width="200" class="no-border" >}}
+* **Line** chart – straight or curved lines, with or without markers {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-line-chart.png" alt="Line chart with three series" width="200" class="no-border" >}}
+* **Pie** chart – a pie or a doughnut chart {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-pie-chart.png" alt="Pie chart with three slices" width="200" class="no-border" >}}
+* **Time series** – show data ordered by time {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-time-series.png" alt="Time series area chart with two series and a range slider" width="200" class="no-border" >}}
 
-* **Area** chart – a line chart with a fill to the X-axis {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-area-chart.png" alt="Sample Area Chart"   width="200"  class="no-border" >}}
-* **Bar** chart – horizontal bars, grouped or stacked {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-bar-chart.png" alt="Sample Bar Chart" width="200" class="no-border" >}}
-* **Bubble** chart – add a size dimension to your chart {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-bubble-chart.png" alt="Sample Bubble Chart" width="200" class="no-border" >}}
-* **Column** chart – vertical bars, grouped or stacked {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-column-chart.png" alt="Sample Column Chart" width="200" class="no-border" >}}
-* **Heat map** – show data values by color in a 2D matrix {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-heat-map.png" alt="Sample Heat Map" width="200" class="no-border" >}}
-* **Line** chart – straight or curved lines, with or without markers {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-line-chart.png" alt="Sample Line Chart" width="200" class="no-border" >}}
-* **Pie** chart – a pie or a doughnut chart {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-pie-chart.png" alt="Sample Pie Chart" width="200" class="no-border" >}}
-* **Time series** – show data ordered by time {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/sample-time-series.png" alt="Sample Time Series" width="200" class="no-border" >}}
+The widgets have settings in Studio Pro to customize the look and feel, and support on click actions and custom tooltips. For details on each chart type, see [Charts](/appstore/widgets/charts/).
 
-The widgets contain several settings which can be changed in Studio Pro to customize the look and feel and also offer support for on click events and custom tooltips. See [Chart Configuration](/refguide/charts-configuration/) to learn how to configure Mendix charts.
-
-If the standard chart settings are not sufficient for your purposes, see [Chart Advanced Cheat Sheet](/refguide/charts-advanced-cheat-sheet/) for information on advanced configuration of your basic charts.
+If the standard chart settings are not sufficient for your purposes, see [Chart Advanced Cheat Sheet](/refguide/charts-advanced-cheat-sheet/) for information on the advanced configuration of your charts. To change settings live in the running app, use the [Chart Playground](/appstore/widgets/chart-playground/).
 
 Only plotly.js features available in the version bundled with your Charts widget release can be used when configuring charts.
 
-**Dynamic Series Chart**
+To create a chart with a variable number of data series, see [Create a Dynamic Series Chart](/appstore/widgets/charts-dynamic-series/).
+
+## Custom Chart {#custom-chart}
 
-From version 1.4 of the basic charts you can create charts with a variable number of data series. For instructions on how to do this, see [How to Create a Dynamic Series Chart](/appstore/widgets/charts-dynamic-series/).
+With the Custom chart widget, you can build all chart types that are possible with Plotly by configuring the chart with JSON. Use it when the standard chart widgets do not support the chart you need. For more information, see [Use Custom Chart](/appstore/widgets/charts-custom-usage/).
 
 ## Any Chart {#any-chart}
 
 {{% alert color="warning" %}}
-The Any Chart widget is not compatible with the [Mendix React Client](/refguide/mendix-client/react/). We have published a version of Any Chart that supports the React client called Custom Chart. Update your [Charts](/appstore/widgets/charts/) widget (to version 6.0 or above) to use the Custom Chart feature.
+Any Chart is deprecated and is not compatible with the [Mendix React Client](/refguide/mendix-client/react/). Use the Custom chart widget, available in [Charts](/appstore/widgets/charts/) version 6.0.0 and above, instead.
 {{% /alert %}}
 
-With *Any Chart* you can build all the chart types that are possible with Plotly.js up to the version supported by the widget (see the widget description in the Marketplace for more details). If you want to build a chart which is not available in the Basic charts, *Any Chart* is your friend.
-
-{{< figure src="/attachments/refguide/modeling/pages/chart-widgets/contour.png" alt="Sample Contour Chart made with Any Chart"   width="400"  class="no-border" >}}
-
-The plotly charts require a configuration based on JSON, therefore *Any Chart* has JSON as input parameters. You can create this JSON dynamically in your microflow via a JSON Structure document and use this in the *Any Chart* configuration. It is also possible to define static JSON configuration which is combined with the dynamic JSON.
-
-This module also contains several [building blocks](/refguide/charts-any-building-blocks/) for inspiration and as starting point. If you want to create a new chart, Mendix suggests checking out the plotly.js website.
-
-See [Any Chart Widgets](/refguide/charts-any-configuration/) to learn how to configure *Any charts* widgets.
+For the legacy Any Chart documentation, see [Any Chart Widgets](/refguide/charts-any-configuration/), [Any Chart Building Blocks](/refguide/charts-any-building-blocks/), and [Any Chart Cheat Sheet](/refguide/charts-any-cheat-sheet/).
 
-The [Any Chart Cheat Sheet](/refguide/charts-any-cheat-sheet/) lists the most common chart types and the JSON required to create them in Any Chart.
+For the legacy chart widgets below version 3.0.0, see [Chart Configuration](/refguide/charts-configuration/).
 
 ## Performing Basic Functions
 
diff --git a/content/en/docs/refguide/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md b/content/en/docs/refguide/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md
index 211b4ffbc1e..531dc454aa7 100644
--- a/content/en/docs/refguide/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md
+++ b/content/en/docs/refguide/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md
@@ -2,6 +2,7 @@
 title: "Chart Advanced Cheat Sheet"
 url: /refguide/charts-advanced-cheat-sheet/
 weight: 20
+description: "Shows, with JSON examples, how to use the advanced layout, series, and configuration options of the chart widgets."
 ---
 
 ## Introduction
diff --git a/content/en/docs/refguide/modeling/pages/chart-widgets/charts-any-configuration.md b/content/en/docs/refguide/modeling/pages/chart-widgets/charts-any-configuration.md
index c03d94b9392..c5ea5598d67 100644
--- a/content/en/docs/refguide/modeling/pages/chart-widgets/charts-any-configuration.md
+++ b/content/en/docs/refguide/modeling/pages/chart-widgets/charts-any-configuration.md
@@ -24,7 +24,7 @@ The Sample data is for demo purposes. It is shown at run time when there is no S
 
 ## Location of Any Chart Widget
 
-The Any Chart Widget must be placed in the context of a **data view**. The data view contains an entity object which has a **Source attribute** (unlimited length string) which contains the JSON representation of the data which you want to plot. Unlike the basic chart widgets, the Any Chart widget does not work directly on the data in your domain model. You have to convert the data you want to plot into the JSON format which Any Chart expects. See [How to Use Any Chart](/howto/front-end/charts-any-usage/) for a step-by-step explanation of how to do this.
+The Any Chart Widget must be placed in the context of a **data view**. The data view contains an entity object which has a **Source attribute** (unlimited length string) which contains the JSON representation of the data which you want to plot. Unlike the basic chart widgets, the Any Chart widget does not work directly on the data in your domain model. You have to convert the data you want to plot into the JSON format which Any Chart expects. See [How to Use Any Chart](/appstore/widgets/charts-any-usage/) for a step-by-step explanation of how to do this.
 
 ## Data
 
@@ -40,7 +40,7 @@ This is an unlimited string attribute which is an attribute of the entity which
 
 In the image below, the **Source attribute** is the *data* attribute of the *ChartContext* entity which is the data view context in which the Any Chart widget is placed.
 
-{{< figure src="/attachments/refguide/modeling/pages/chart-widgets/charts-any-configuration/any-chart-page-placement.png" class="no-border" >}}
+{{< figure src="/attachments/refguide/modeling/pages/chart-widgets/charts-any-configuration/any-chart-page-placement.png" alt="Any Chart widget inside a ChartContext data view, with its Source attribute set to an attribute of ChartContext" class="no-border" >}}
 
 The **Source attribute** contains a JSON structure which will merge with, and overwrite, the **Static** data. Commonly, this contains the data which you wish to plot, but it can also overwrite other static elements such as the type of chart, colors of lines, or the orientation of bars in a bar chart.
 
@@ -198,7 +198,7 @@ To the theme folder, add a *.json* file named *com.mendix.charts*. The JSON shou
 }
 ```
 
-For guidance on how to set up chart theming see: [How to Use the Charts Theme](/howto/front-end/charts-theme/).
+For guidance on how to set up chart theming see: [How to Use the Charts Theme](/appstore/widgets/charts-theme/).
 
 {{% alert color="info" %}}
 
diff --git a/content/en/docs/refguide/modeling/pages/chart-widgets/charts-configuration.md b/content/en/docs/refguide/modeling/pages/chart-widgets/charts-configuration.md
index b6815ff87e1..7e1c920cfec 100644
--- a/content/en/docs/refguide/modeling/pages/chart-widgets/charts-configuration.md
+++ b/content/en/docs/refguide/modeling/pages/chart-widgets/charts-configuration.md
@@ -2,10 +2,15 @@
 title: "Chart Configuration"
 url: /refguide/charts-configuration/
 weight: 10
+description: "Describes the configuration options of the legacy chart widgets, below version 3.0.0."
 ---
 
 ## Introduction
 
+{{% alert color="warning" %}}
+This page describes the legacy chart widgets, below version 3.0.0. For the current Charts module, see [Charts](/appstore/widgets/charts/) in the *Marketplace Guide*.
+{{% /alert %}}
+
 This guide explains the options for configuring chart widgets. Charts are included in Mendix app templates based on Atlas UI. They can be included in other Mendix apps by downloading them from the [Mendix Marketplace](https://marketplace.mendix.com/link/component/105695/). For more documentation, see [Charts](/appstore/widgets/charts/) in the *Marketplace Guide*.
 
 This guide covers the following widgets:
@@ -22,11 +27,11 @@ This guide covers the following widgets:
 
 The configuration of *Any chart* widgets is in another document, here: [Any Chart Widgets](/refguide/charts-any-configuration/).
 
-## Common configuration
+## Common Configuration
 
 The common configuration for all charts is described here. For chart specific configuration see [Configuration by Chart Type](#configuration-by-chart-type), below.
 
-### Chart properties
+### Chart Properties
 
 {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/charts-configuration/line-chart-chart-properties.png" alt="Generic Chart properties dialog" class="no-border" >}}
 
@@ -57,7 +62,7 @@ Add series and configure their properties, each series represents a dataset. For
     * **Static/Dynamic**: Choose whether there is a fixed number of data series (lines, for example), or whether the number of data series is variable and will be decided by the app.
     * **Entity**: The entity from which the data values will be retrieved
     * **Data source**: the data source type for the series: *Database*, *Microflow* or *REST endpoint*
-    * **REST URL**: Relative or full URL to REST endpoint. For more information on setting up a REST endpoint see [REST Charts](/howto/front-end/charts-basic-rest/)
+    * **REST URL**: Relative or full URL to REST endpoint. For more information on setting up a REST endpoint see [REST Charts](/appstore/widgets/charts-basic-rest/)
     * **XPath constraint**: The constraint on the data from the entity (used when the data source is Database)
     * **Microflow**: A microflow that returns a list object with data values
 
@@ -96,7 +101,7 @@ Add series and configure their properties, each series represents a dataset. For
 
     * **Series entity**: the entity which defines a series – the list of objects of this entity type will be used to construct the series; one series for each object.
 
-        Each entity is associated with the values which will be plotted, see [How to Create a Dynamic Series Chart](/howto/front-end/charts-dynamic-series/) for more information.
+        Each entity is associated with the values which will be plotted, see [How to Create a Dynamic Series Chart](/appstore/widgets/charts-dynamic-series/) for more information.
 
     * **Series name attribute**: the attribute in the series entity which will be displayed as the series name if a legend is displayed
     * **Color attribute**: the attribute in the series entity which defines the HTML color used when displayed this series – *there may be more than one color attribute if the chart allows different values (for example an area chart has separate line and fill colors)
@@ -163,7 +168,7 @@ Add parameters to a REST request (see [Data source](#data-source)). The contextI
 
 The charts are based on the popular framework plotly.js which uses JSON to configure the charts. In the advanced and developer mode, you can specify additional JSON: unlocking the many features of plotly.js. You can also do this with a live preview.
 
-See the following link for more information about plotly.js and the options: https://plot.ly/javascript/.
+Understanding the plotly.js framework is essential for understanding Mendix widget configuration, because we match their framework closely. See the following link for more information about plotly.js and the options: https://plot.ly/javascript/.
 
 {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/charts-configuration/widget-advanced.png" alt="Generic Chart Advanced Tab" class="no-border" >}}
 
@@ -173,7 +178,7 @@ See the following link for more information about plotly.js and the options: htt
     * **Advanced**: specify additional JSON configuration
     * **Developer**: this will add a **Toggle Editor** button to the chart at runtime which toggles an editor to play with different advanced configuration options
 
-    {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/charts-configuration/toggle-editor.png" class="no-border" >}}
+    {{< figure src="/attachments/refguide/modeling/pages/chart-widgets/charts-configuration/toggle-editor.png" alt="Toggle Editor button on a chart" class="no-border" >}}
 
 * **Layout options**: The JSON containing the Plotly layout options
     * [Samples](/refguide/charts-advanced-cheat-sheet/#layout-all)
@@ -205,10 +210,14 @@ The properties above are common across the chart types. In this section, the pro
 
 **Series New or Edit**
 
-1. **Appearance** Tab
+1. **Dimensions** Tab
 
-    * **Line mode**: *Lines* (without showing markers where the data points are) or *Lines with markers*
-    * **Line style**: join the data points with a *Straight line* or a *Curved line (spline)*
+    * **Width unit**: can be one of the following:
+        * **Percentage** (default): portion of parent size.
+        * **Pixels**: absolute number of pixels.
+    * **Width**: sets the portion of the width per your selected unit.
+    * **Height unit**: can be **Percentage** (default) or **Pixels**.
+    * **Height**: sets the portion of the height per your selected unit.
 
 2. **Static series** Tab
 
diff --git a/content/en/docs/refguide10/modeling/domain-model/entities/view-entities/charting-with-view-entities.md b/content/en/docs/refguide10/modeling/domain-model/entities/view-entities/charting-with-view-entities.md
index c5f6f7fd7ee..2d4a9597c1a 100644
--- a/content/en/docs/refguide10/modeling/domain-model/entities/view-entities/charting-with-view-entities.md
+++ b/content/en/docs/refguide10/modeling/domain-model/entities/view-entities/charting-with-view-entities.md
@@ -2,6 +2,7 @@
 title: "Charting with View Entities"
 url: /refguide10/charting-with-view-entities/
 weight: 40
+description: "Describes how to use view entities to create charts with aggregated data."
 ---
 
 ## Introduction
@@ -12,11 +13,11 @@ You can use view entities to create charts in Studio Pro. This process uses aggr
 
 For this purpose of this use case, the following domain model is used:
 
-{{< figure src="/attachments/refguide10/modeling/domain-model/view-entities/charting-with-view-entities/domain-model.png" width="500" >}}
+{{< figure src="/attachments/refguide10/modeling/domain-model/view-entities/charting-with-view-entities/domain-model.png" alt="Domain model with Product, Category, OrderLine, and Order entities and their associations" width="500" >}}
 
 For example, you own a small business. To keep track of what is being sold, you want to visualize your sales. You want to see how much you make in sales each year, and how each product category contributes to the number. You would like your chart to look similar to the one below:
 
-{{< figure src="/attachments/refguide10/modeling/domain-model/view-entities/charting-with-view-entities/chart-example.png" width="500" >}}
+{{< figure src="/attachments/refguide10/modeling/domain-model/view-entities/charting-with-view-entities/chart-example.png" alt="Stacked column chart of yearly sales by product category for 1996, 1997, and 1998" width="500" >}}
 
 ### Create a View Entity
 
@@ -65,11 +66,11 @@ Use the new view entity to create a chart. Follow the steps below:
     * In the **Series name** field, click **Edit** and add **{1}** in the **Template** field. 
     * In the **Parameters** field, click **New** > **Select** > **CategoryName** > **Select** > **OK**.
 
-    {{< figure src="/attachments/refguide10/modeling/domain-model/view-entities/charting-with-view-entities/series-name.png" width="400" >}}
+    {{< figure src="/attachments/refguide10/modeling/domain-model/view-entities/charting-with-view-entities/series-name.png" alt="Edit Series name dialog box with the template {1} and the parameter CategoryName" width="400" >}}
 
     The chart should be configured as seen below: 
 
-    {{< figure src="/attachments/refguide10/modeling/domain-model/view-entities/charting-with-view-entities/chart-final.png" width="400" >}}
+    {{< figure src="/attachments/refguide10/modeling/domain-model/view-entities/charting-with-view-entities/chart-final.png" alt="Column chart properties with a Multiple series data set, axis labels, and Column format set to Stacked" width="400" >}}
 
 6. Click **OK** to save.
 
diff --git a/content/en/docs/refguide10/modeling/pages/chart-widgets/_index.md b/content/en/docs/refguide10/modeling/pages/chart-widgets/_index.md
index 6a3333d3501..7316ed71e93 100644
--- a/content/en/docs/refguide10/modeling/pages/chart-widgets/_index.md
+++ b/content/en/docs/refguide10/modeling/pages/chart-widgets/_index.md
@@ -3,39 +3,40 @@ title: "Charts"
 url: /refguide10/chart-widgets/
 weight: 70
 no_list: false
-description_list: true 
+description_list: true
+description: "Describes the chart widgets you can use on your app pages."
 ---
 
 ## Introduction
 
 Charts allow you to display data series visually on your app pages in a wide range of charts.
 
-[Basic Charts](#basic-charts) are included in Mendix app templates based on Atlas UI. They can be included in other Mendix apps by downloading them from the Mendix Marketplace (for more information on various charts and their configurations, see [Charts](/appstore/widgets/charts/)). Basic charts are based on plotly.js 3.x as of Charts widget version 6.0.0. For the exact plotly.js version in the release you are using, see the [Charts](https://marketplace.mendix.com/link/component/105695/) listing in the Mendix Marketplace.
+The chart widgets are part of the [Charts](https://marketplace.mendix.com/link/component/105695/) module, which you can download from the Mendix Marketplace. The widgets are based on the [Plotly JavaScript](https://plotly.com/javascript/) library. For the configuration of the chart widgets, see [Charts](/appstore/widgets/charts/) in the *Marketplace Guide*.
 
-[Any Chart](#any-chart) gives much more control and allows more flexible use of the features of [plotly.js](https://plot.ly/). The [Any Chart](/appstore/modules/any-chart/) widget can be included in your app. See the widget description in the Marketplace to see what version of plotly.js is supported.
+## Chart Types {#basic-charts}
 
-## Basic Charts {#basic-charts}
+The Charts module contains these chart widgets:
 
-With Mendix Charts you can quickly create beautiful charts. The following charts are included:
+* **Area** chart – a line chart with a fill to the X-axis {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-area-chart.png" alt="Area chart with three stacked series"   width="200"  class="no-border" >}}
+* **Bar** chart – horizontal bars, grouped or stacked {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-bar-chart.png" alt="Horizontal bar chart with three grouped series" width="200" class="no-border" >}}
+* **Bubble** chart – add a size dimension to your chart {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-bubble-chart.png" alt="Bubble chart with three series of different-sized bubbles" width="200" class="no-border" >}}
+* **Column** chart – vertical bars, grouped or stacked {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-column-chart.png" alt="Column chart with two grouped series" width="200" class="no-border" >}}
+* **Heat map** – show data values by color in a 2D matrix {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-heat-map.png" alt="Heat map with a grid of colored cells and a color scale" width="200" class="no-border" >}}
+* **Line** chart – straight or curved lines, with or without markers {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-line-chart.png" alt="Line chart with three series" width="200" class="no-border" >}}
+* **Pie** chart – a pie or a doughnut chart {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-pie-chart.png" alt="Pie chart with three slices" width="200" class="no-border" >}}
+* **Time series** – show data ordered by time {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-time-series.png" alt="Time series area chart with two series and a range slider" width="200" class="no-border" >}}
 
-* **Area** chart – a line chart with a fill to the X-axis {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-area-chart.png" alt="Sample Area Chart"   width="200"  class="no-border" >}}
-* **Bar** chart – horizontal bars, grouped or stacked {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-bar-chart.png" alt="Sample Bar Chart" width="200" class="no-border" >}}
-* **Bubble** chart – add a size dimension to your chart {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-bubble-chart.png" alt="Sample Bubble Chart" width="200" class="no-border" >}}
-* **Column** chart – vertical bars, grouped or stacked {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-column-chart.png" alt="Sample Column Chart" width="200" class="no-border" >}}
-* **Heat map** – show data values by color in a 2D matrix {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-heat-map.png" alt="Sample Heat Map" width="200" class="no-border" >}}
-* **Line** chart – straight or curved lines, with or without markers {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-line-chart.png" alt="Sample Line Chart" width="200" class="no-border" >}}
-* **Pie** chart – a pie or a doughnut chart {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-pie-chart.png" alt="Sample Pie Chart" width="200" class="no-border" >}}
-* **Time series** – show data ordered by time {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/sample-time-series.png" alt="Sample Time Series" width="200" class="no-border" >}}
+The widgets have settings in Studio Pro to customize the look and feel, and support on click actions and custom tooltips. For details on each chart type, see [Charts](/appstore/widgets/charts/).
 
-The widgets contain several settings which can be changed in Studio Pro to customize the look and feel and also offer support for on click events and custom tooltips. See [Chart Configuration](/refguide10/charts-configuration/) to learn how to configure Mendix charts.
-
-If the standard chart settings are not sufficient for your purposes, see [Chart Advanced Cheat Sheet](/refguide10/charts-advanced-cheat-sheet/) for information on advanced configuration of your basic charts.
+If the standard chart settings are not sufficient for your purposes, see [Chart Advanced Cheat Sheet](/refguide10/charts-advanced-cheat-sheet/) for information on the advanced configuration of your charts. To change settings live in the running app, use the [Chart Playground](/appstore/widgets/chart-playground/).
 
 Only plotly.js features available in the version bundled with your Charts widget release can be used when configuring charts.
 
-**Dynamic Series Chart**
+To create a chart with a variable number of data series, see [Create a Dynamic Series Chart](/appstore/widgets/charts-dynamic-series/).
+
+## Custom Chart {#custom-chart}
 
-From version 1.4 of the basic charts you can create charts with a variable number of data series. For instructions on how to do this, see [How to Create a Dynamic Series Chart](/appstore/widgets/charts-dynamic-series/).
+With the Custom chart widget, you can build all chart types that are possible with Plotly by configuring the chart with JSON. Use it when the standard chart widgets do not support the chart you need. For more information, see [Use Custom Chart](/appstore/widgets/charts-custom-usage/).
 
 ## Any Chart {#any-chart}
 
@@ -51,9 +52,9 @@ The plotly charts require a configuration based on JSON, therefore *Any Chart* h
 
 This module also contains several [building blocks](/refguide10/charts-any-building-blocks/) for inspiration and as starting point. If you want to create a new chart, Mendix suggests checking out the plotly.js website.
 
-See [Any Chart Widgets](/refguide10/charts-any-configuration/) to learn how to configure *Any charts* widgets.
+For the legacy Any Chart documentation, see [Any Chart Widgets](/refguide10/charts-any-configuration/) and [Any Chart Cheat Sheet](/refguide10/charts-any-cheat-sheet/).
 
-The [Any Chart Cheat Sheet](/refguide10/charts-any-cheat-sheet/) lists the most common chart types and the JSON required to create them in Any Chart.
+For the legacy chart widgets below version 3.0.0, see [Chart Configuration](/refguide10/charts-configuration/).
 
 ## Performing Basic Functions
 
diff --git a/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md b/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md
index 9ceb96f3014..377088708f1 100644
--- a/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md
+++ b/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md
@@ -2,6 +2,7 @@
 title: "Chart Advanced Cheat Sheet"
 url: /refguide10/charts-advanced-cheat-sheet/
 weight: 20
+description: "Shows, with JSON examples, how to use the advanced layout, series, and configuration options of the chart widgets."
 ---
 
 ## Introduction
diff --git a/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-any-configuration.md b/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-any-configuration.md
index d9405a50ebb..24252b3431e 100644
--- a/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-any-configuration.md
+++ b/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-any-configuration.md
@@ -40,7 +40,7 @@ This is an unlimited string attribute which is an attribute of the entity which
 
 In the image below, the **Source attribute** is the *data* attribute of the *ChartContext* entity which is the data view context in which the Any Chart widget is placed.
 
-{{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/charts-any-configuration/any-chart-page-placement.png" class="no-border" >}}
+{{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/charts-any-configuration/any-chart-page-placement.png" alt="Any Chart widget inside a ChartContext data view, with its Source attribute set to an attribute of ChartContext" class="no-border" >}}
 
 The **Source attribute** contains a JSON structure which will merge with, and overwrite, the **Static** data. Commonly, this contains the data which you wish to plot, but it can also overwrite other static elements such as the type of chart, colors of lines, or the orientation of bars in a bar chart.
 
diff --git a/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-configuration.md b/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-configuration.md
index 97a9cf45c4f..f41c85f5a29 100644
--- a/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-configuration.md
+++ b/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-configuration.md
@@ -2,10 +2,15 @@
 title: "Chart Configuration"
 url: /refguide10/charts-configuration/
 weight: 10
+description: "Describes the configuration options of the legacy chart widgets, below version 3.0.0."
 ---
 
 ## Introduction
 
+{{% alert color="warning" %}}
+This page describes the legacy chart widgets, below version 3.0.0. For the current Charts module, see [Charts](/appstore/widgets/charts/) in the *Marketplace Guide*.
+{{% /alert %}}
+
 This guide explains the options for configuring chart widgets. Charts are included in Mendix app templates based on Atlas UI. They can be included in other Mendix apps by downloading them from the [Mendix Marketplace](https://marketplace.mendix.com/link/component/105695/). For more documentation, see [Charts](/appstore/widgets/charts/) in the *Marketplace Guide*.
 
 This guide covers the following widgets:
@@ -22,11 +27,11 @@ This guide covers the following widgets:
 
 The configuration of *Any chart* widgets is in another document, here: [Any Chart Widgets](/refguide10/charts-any-configuration/).
 
-## Common configuration
+## Common Configuration
 
 The common configuration for all charts is described here. For chart specific configuration see [Configuration by Chart Type](#configuration-by-chart-type), below.
 
-### Chart properties
+### Chart Properties
 
 {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/charts-configuration/line-chart-chart-properties.png" alt="Generic Chart properties dialog" class="no-border" >}}
 
@@ -163,7 +168,7 @@ Add parameters to a REST request (see [Data source](#data-source)). The contextI
 
 The charts are based on the popular framework plotly.js which uses JSON to configure the charts. In the advanced and developer mode, you can specify additional JSON: unlocking the many features of plotly.js. You can also do this with a live preview.
 
-See the following link for more information about plotly.js and the options: https://plot.ly/javascript/.
+Understanding the plotly.js framework is essential for understanding Mendix widget configuration, because we match their framework closely. See the following link for more information about plotly.js and the options: https://plot.ly/javascript/.
 
 {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/charts-configuration/widget-advanced.png" alt="Generic Chart Advanced Tab" class="no-border" >}}
 
@@ -173,7 +178,7 @@ See the following link for more information about plotly.js and the options: htt
     * **Advanced**: specify additional JSON configuration
     * **Developer**: this will add a **Toggle Editor** button to the chart at runtime which toggles an editor to play with different advanced configuration options
 
-    {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/charts-configuration/toggle-editor.png" class="no-border" >}}
+    {{< figure src="/attachments/refguide10/modeling/pages/chart-widgets/charts-configuration/toggle-editor.png" alt="Toggle Editor button on a chart" class="no-border" >}}
 
 * **Layout options**: The JSON containing the Plotly layout options
     * [Samples](/refguide10/charts-advanced-cheat-sheet/#layout-all)
diff --git a/content/en/docs/refguide9/modeling/pages/chart-widgets/charts-configuration.md b/content/en/docs/refguide9/modeling/pages/chart-widgets/charts-configuration.md
index f732edc16ba..c5167a583fd 100644
--- a/content/en/docs/refguide9/modeling/pages/chart-widgets/charts-configuration.md
+++ b/content/en/docs/refguide9/modeling/pages/chart-widgets/charts-configuration.md
@@ -163,7 +163,7 @@ Add parameters to a REST request (see [Data source](#data-source)). The contextI
 
 The charts are based on the popular framework plotly.js which uses JSON to configure the charts. In the advanced and developer mode, you can specify additional JSON: unlocking the many features of plotly.js. You can also do this with a live preview.
 
-See the following link for more information about plotly.js and the options: https://plot.ly/javascript/.
+Understanding the plotly.js framework is essential for understanding Mendix widget configuration, because we match their framework closely. See the following link for more information about plotly.js and the options: https://plot.ly/javascript/.
 
 {{< figure src="/attachments/refguide9/modeling/pages/chart-widgets/charts-configuration/widget-advanced.png" alt="Generic Chart Advanced Tab" class="no-border" >}}
 
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/chart-playground-add.png b/static/attachments/appstore/platform-supported-content/widgets/charts/chart-playground-add.png
new file mode 100644
index 00000000000..41099b8dacf
Binary files /dev/null and b/static/attachments/appstore/platform-supported-content/widgets/charts/chart-playground-add.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/chart-playground-editor.png b/static/attachments/appstore/platform-supported-content/widgets/charts/chart-playground-editor.png
new file mode 100644
index 00000000000..3a55b48866d
Binary files /dev/null and b/static/attachments/appstore/platform-supported-content/widgets/charts/chart-playground-editor.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/chart-with-legend.png b/static/attachments/appstore/platform-supported-content/widgets/charts/chart-with-legend.png
index 8d6b560499b..55e977ec1b9 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/chart-with-legend.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/chart-with-legend.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-config-toolbar.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-config-toolbar.png
index 0e6bea058e1..6e5a3245ed9 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-config-toolbar.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-config-toolbar.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor-closed.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor-closed.png
new file mode 100644
index 00000000000..510d75b1656
Binary files /dev/null and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor-closed.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor-open.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor-open.png
index d8ad565ab70..b919476ee3a 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor-open.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor-open.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor.png
index d38194eb3b6..510d75b1656 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-toggle-editor.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-properties.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-properties.png
index e7155e7e611..4dea67afab7 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-properties.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-properties.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-result.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-result.png
index 8610822fe37..9f2bdaadb9a 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-result.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination-result.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination.png
index 42db9f042ea..9047856908c 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar-line-combination.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar.png
index b55a12e6bff..6fb54ee0b4a 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-bar.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-properties-advanced-config.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-properties-advanced-config.png
index 5a10eec9078..3f3ca3ad99b 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-properties-advanced-config.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-advanced-tuning/charts-widget-properties-advanced-config.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/custom-chart-configuration.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/custom-chart-configuration.png
new file mode 100644
index 00000000000..8dbf3deb92f
Binary files /dev/null and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/custom-chart-configuration.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/custom-chart-sample.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/custom-chart-sample.png
new file mode 100644
index 00000000000..064cd2edb79
Binary files /dev/null and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-any-usage/custom-chart-sample.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-widget-page.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-widget-page.png
index 29f0cc599ff..40d668e7c6d 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-widget-page.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-widget-page.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-dynamic-series/charts-dynamic-series-chart.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-dynamic-series/charts-dynamic-series-chart.png
index 302bd9d8ecf..c28deecf4a8 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-dynamic-series/charts-dynamic-series-chart.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-dynamic-series/charts-dynamic-series-chart.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-theme/charts-enable-theme-config.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-theme/charts-enable-theme-config.png
new file mode 100644
index 00000000000..660578e2e90
Binary files /dev/null and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-theme/charts-enable-theme-config.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-theme/charts-toggle-editor-changed.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-theme/charts-toggle-editor-changed.png
index 5d441394266..64b4dcb5269 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-theme/charts-toggle-editor-changed.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-theme/charts-toggle-editor-changed.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/column-chart-format-grouped-vs-stacked.png b/static/attachments/appstore/platform-supported-content/widgets/charts/column-chart-format-grouped-vs-stacked.png
index 94f6d9b96ae..6d47a8ccb4f 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/column-chart-format-grouped-vs-stacked.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/column-chart-format-grouped-vs-stacked.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-1.png b/static/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-1.png
index bba7ae7ce58..05ada8de641 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-1.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-1.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-2.png b/static/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-2.png
index a9de2a5ccc2..85333df83fa 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-2.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/custom-series-settings-step-2.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/data-source-example.png b/static/attachments/appstore/platform-supported-content/widgets/charts/data-source-example.png
index 7c150cbd6b8..06840368d77 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/data-source-example.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/data-source-example.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/pie-chart-series-name-example.png b/static/attachments/appstore/platform-supported-content/widgets/charts/pie-chart-series-name-example.png
index 5a94a549077..c67f69d56c3 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/pie-chart-series-name-example.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/pie-chart-series-name-example.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/series-appearance-tab.png b/static/attachments/appstore/platform-supported-content/widgets/charts/series-appearance-tab.png
new file mode 100644
index 00000000000..bca9754d917
Binary files /dev/null and b/static/attachments/appstore/platform-supported-content/widgets/charts/series-appearance-tab.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/series-item-example.png b/static/attachments/appstore/platform-supported-content/widgets/charts/series-item-example.png
index efa2b75fe03..af8d757ae38 100644
Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/series-item-example.png and b/static/attachments/appstore/platform-supported-content/widgets/charts/series-item-example.png differ
diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/show-playground-slot.png b/static/attachments/appstore/platform-supported-content/widgets/charts/show-playground-slot.png
new file mode 100644
index 00000000000..6d0a9c0bbf0
Binary files /dev/null and b/static/attachments/appstore/platform-supported-content/widgets/charts/show-playground-slot.png differ
diff --git a/static/attachments/refguide/modeling/pages/chart-widgets/sample-area-chart.png b/static/attachments/refguide/modeling/pages/chart-widgets/sample-area-chart.png
index 6eb04557c1c..6b84e92f791 100644
Binary files a/static/attachments/refguide/modeling/pages/chart-widgets/sample-area-chart.png and b/static/attachments/refguide/modeling/pages/chart-widgets/sample-area-chart.png differ
diff --git a/static/attachments/refguide/modeling/pages/chart-widgets/sample-bar-chart.png b/static/attachments/refguide/modeling/pages/chart-widgets/sample-bar-chart.png
index b70cc4ad319..3e4f5d5bda0 100644
Binary files a/static/attachments/refguide/modeling/pages/chart-widgets/sample-bar-chart.png and b/static/attachments/refguide/modeling/pages/chart-widgets/sample-bar-chart.png differ
diff --git a/static/attachments/refguide/modeling/pages/chart-widgets/sample-bubble-chart.png b/static/attachments/refguide/modeling/pages/chart-widgets/sample-bubble-chart.png
index f4c48dccb3c..ad686594b27 100644
Binary files a/static/attachments/refguide/modeling/pages/chart-widgets/sample-bubble-chart.png and b/static/attachments/refguide/modeling/pages/chart-widgets/sample-bubble-chart.png differ
diff --git a/static/attachments/refguide/modeling/pages/chart-widgets/sample-column-chart.png b/static/attachments/refguide/modeling/pages/chart-widgets/sample-column-chart.png
index e09c0265d2f..2cae838651b 100644
Binary files a/static/attachments/refguide/modeling/pages/chart-widgets/sample-column-chart.png and b/static/attachments/refguide/modeling/pages/chart-widgets/sample-column-chart.png differ
diff --git a/static/attachments/refguide/modeling/pages/chart-widgets/sample-heat-map.png b/static/attachments/refguide/modeling/pages/chart-widgets/sample-heat-map.png
index 6ede4fd0355..91ca6aba739 100644
Binary files a/static/attachments/refguide/modeling/pages/chart-widgets/sample-heat-map.png and b/static/attachments/refguide/modeling/pages/chart-widgets/sample-heat-map.png differ
diff --git a/static/attachments/refguide/modeling/pages/chart-widgets/sample-line-chart.png b/static/attachments/refguide/modeling/pages/chart-widgets/sample-line-chart.png
index 35b262cedcd..0f3260072e9 100644
Binary files a/static/attachments/refguide/modeling/pages/chart-widgets/sample-line-chart.png and b/static/attachments/refguide/modeling/pages/chart-widgets/sample-line-chart.png differ
diff --git a/static/attachments/refguide/modeling/pages/chart-widgets/sample-pie-chart.png b/static/attachments/refguide/modeling/pages/chart-widgets/sample-pie-chart.png
index a214459de1c..cc52b40089c 100644
Binary files a/static/attachments/refguide/modeling/pages/chart-widgets/sample-pie-chart.png and b/static/attachments/refguide/modeling/pages/chart-widgets/sample-pie-chart.png differ
diff --git a/static/attachments/refguide/modeling/pages/chart-widgets/sample-time-series.png b/static/attachments/refguide/modeling/pages/chart-widgets/sample-time-series.png
index ddd34d153b5..a9670f45c20 100644
Binary files a/static/attachments/refguide/modeling/pages/chart-widgets/sample-time-series.png and b/static/attachments/refguide/modeling/pages/chart-widgets/sample-time-series.png differ
diff --git a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-area-chart.png b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-area-chart.png
index 6eb04557c1c..6b84e92f791 100644
Binary files a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-area-chart.png and b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-area-chart.png differ
diff --git a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-bar-chart.png b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-bar-chart.png
index b70cc4ad319..3e4f5d5bda0 100644
Binary files a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-bar-chart.png and b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-bar-chart.png differ
diff --git a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-bubble-chart.png b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-bubble-chart.png
index f4c48dccb3c..ad686594b27 100644
Binary files a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-bubble-chart.png and b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-bubble-chart.png differ
diff --git a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-column-chart.png b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-column-chart.png
index e09c0265d2f..2cae838651b 100644
Binary files a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-column-chart.png and b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-column-chart.png differ
diff --git a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-heat-map.png b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-heat-map.png
index 6ede4fd0355..91ca6aba739 100644
Binary files a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-heat-map.png and b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-heat-map.png differ
diff --git a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-line-chart.png b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-line-chart.png
index 35b262cedcd..0f3260072e9 100644
Binary files a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-line-chart.png and b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-line-chart.png differ
diff --git a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-pie-chart.png b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-pie-chart.png
index a214459de1c..cc52b40089c 100644
Binary files a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-pie-chart.png and b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-pie-chart.png differ
diff --git a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-time-series.png b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-time-series.png
index ddd34d153b5..a9670f45c20 100644
Binary files a/static/attachments/refguide10/modeling/pages/chart-widgets/sample-time-series.png and b/static/attachments/refguide10/modeling/pages/chart-widgets/sample-time-series.png differ