after review part 1

user-guide/app-tour.md

@@ -28,4 +28,5 @@ As illustrated by the video above, the main elements of the Web Report Designer'
 
 ## See Also
 
+* [Create a Simple Report]({%slug designing-reports/report-designer-tools/web-report-designer/user-guide/creating-report-in-wrd%})
 * [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%})

user-guide/components/charts.md

@@ -0,0 +1,185 @@
+---
+title: Charts
+page_title: Charts
+description: Explore the available Chart report components offered by the Web Report Designer.
+slug: web-report-designer-user-guide-components-charts
+tags: web, report, design, report, components, chart, bar, line, area, column, pie, doughnut, polar, range, scatter, bubble, sparkline, ohlc
+published: True
+position: 5
+---
+List
+<style>
+img[alt$="><"] {
+  border: 1px solid lightgrey;
+}
+</style>
+
+# Charts 
+
+The **Web Report Designer** offers a **Charts** section inside the **Components** tray allowing the end-user to visualize the data records from different [Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) storages: 
+
+<div style="display: flex; align-items: flex-start; gap: 24px;">
+  <img alt="><" title="Components tray" src="images/wrd-components-tray-charts.png" style="max-width:240px; height:auto; border:1px solid lightgrey;" />
+  <table style="width:100%; height:100%;">
+    <tr>
+      <th style="width:30%">Chart Type</th><th>Description</th>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#bar-charts">Bar Chart</a></td>
+      <td>Displays data series as sets of horizontal bars, graphically summarizes and renders data categories, and enables users to easily compare amounts or values between different categories.</td>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#line-charts">Line Chart</a></td>
+      <td>Displays series as sets of points connected by a single line and represents large amounts of data that occur over a continuous period of time.</td>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#area-charts">Area Chart</a></td>
+      <td>Displays a series as a set of points connected by a line with the whole area filled in under the line.</td>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#column-charts">Column Chart</a></td>
+      <td>Displays data series as sets of vertical bars that are grouped by category.</td>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#pie-charts">Pie Chart</a></td>
+      <td>Displays the contribution of fractional parts to a whole and is most commonly used to make comparisons between groups.</td>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts#pie-charts">Doughnut Chart</a></td>
+      <td>Similar to the Pie Chart which has an open space in the center.</td>
+    </tr>
+    </tr>
+        <tr><td colspan=2 align=center><img alt="><" title="Components tray" src="images/wrd-components-tray-charts-small.png" /></td> 
+    </tr> 
+  </table>
+</div>
+
+Before adding a Chart report item, first, you need to select the **Details** section of the report. Then, you can select the desired chart type from the **Components** tray and configure it with the desired data source.
+
+## Bar Charts
+
+By clicking the `Bar` item from the **Components** tray (step 1.), a new tab will appear on the right-hand side of the **Web Report Designer** (step 2.): 
+
+>caption Configuration Settings
+
+![Configure Bar Chart ><](images/wrd-components-tray-charts-configure-bar-chart.png)    
+
+>note The *Configuration pane* is identical for all chart types, allowing the end-user to specify the Data Source and configure the Categories, Series and Values groups.
+
+Build the desired chart and use an already defined [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}). According to the data that should be displayed, it is possible to configure **Categories**, **Series** and **Values** groups. The following short video shows how to feed the chart with data from the already existing SQL Data Source that displays the total **Freight** for each **Country**:
+
+>caption Populating Bar Chart with Orders' Freight by ShipCountry
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/PD8RnyexfvQ?si=-sUhyCqDy0FC54O0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+### Combine Mode
+
+In case of having multiple series per category in the chart, it is possible to fine-tune the *combine mode* for the bar series for better illustration of the data. Telerik Reporting supports the following Bar chart types:
+
+![Bar Chart Type ><](images/wrd-components-tray-charts-configure-bar-chart-type.png)    
+
+Let's have the following sample CSV data that will be used for the example:
+
+>caption CSV Data Source
+
+```
+Category, Year, Value
+Accessories, 2003,230
+Accessories,2004,340
+Bikes, 2001, 150
+Bikes, 2002, 195
+Bikes, 2003, 340
+Bikes, 2004, 265
+Clothing, 2002, 80
+Clothing, 2003, 120
+Clothing, 2004, 110
+Components, 2001, 230
+Components, 2002, 140
+Components, 2003, 280
+Components, 2004, 310
+```
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/ypQHSpXnJkw?si=_pjCxfXAIfKoWBa_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Create a Bar Chart that uses the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*. According to the selected Bar Chart Type, the following charts will be displayed:
+
+|**Clustered Bar**|**Stacked Bar**|**100% Stacked Bar**|
+|----|----|----|
+|![Clustered Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-clustered-type.png)|![Stacked Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-stacked-type.png)|![100% Stacked Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-100-stacked-type.png) |
+
+## Column Charts
+
+By clicking the `Column` item from the **Components** tray, a similar tab (like the one shown in the *Configuration Settings* above) will appear on the right-hand side of the **Web Report Designer**. The **Column** chart type is very similar to the **Bar** chart (which displays series as sets of horizontal bars) and to the **Range** Column chart (which displays series as sets of vertical bars with varying beginning and end points).
+
+We will use the same *CSV Data Source* and configure the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*:
+
+>caption Populating Column Chart
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/ePCehcujGnU?si=iQ5SDFrLaJeatsgl" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+According to the selected Column Chart Type, the following charts will be displayed: 
+
+|**Clustered Column**|**Stacked Column**|**100% Stacked Column**|
+|----|----|----|
+|![Clustered Column Chart Type ](images/wrd-components-tray-charts-configure-column-chart-clustered-type.png)|![Stacked Column Type ](images/wrd-components-tray-charts-configure-column-chart-stacked-type.png)|  ![100% Stacked Column Chart Type ](images/wrd-components-tray-charts-configure-column-chart-100-stacked-type.png) |
+
+## Area Charts
+
+By clicking the `Area` item from the **Components** tray, the *Configuration Settings* pane will appear on the right-hand side of the **Web Report Designer**. We will use the same *CSV Data Source* and configure the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*:
+
+>caption Populating Area Chart
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/1F4df2B3TTw?si=SskFAdk4lDTmijfr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+According to the selected **Area Chart Type**, the following charts will be displayed: 
+
+![Area Chart Type ><](images/wrd-components-tray-charts-configure-area-chart-types.png) 
+
+|**Area**|**Stacked Area**|**100% Stacked Area**|
+|----|----|----|
+|![Area Chart Type ](images/wrd-components-tray-charts-configure-area-chart-type.png)|![Stacked Area Type ](images/wrd-components-tray-charts-configure-stacked-area-type.png)|![100% Stacked Area Type ](images/wrd-components-tray-charts-configure-area-100-stacked-type.png) | 
+
+## Line Charts 
+
+By clicking the `Line` item from the **Components** tray, the *Configuration Settings* pane will appear on the right-hand side of the **Web Report Designer**. We will use the same *CSV Data Source* and configure the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*:
+
+>caption Populating Line Chart
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/FVBqHGrqYvQ?si=MBSYV08JWm7KEhUJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+According to the selected **Line Chart Type**, the following charts will be displayed: 
+
+![Line Chart Type ><](images/wrd-components-tray-charts-configure-line-chart-types.png)  
+
+The table illustrates how each of the chart types is expected to look:
+
+|**Line**|**Stacked Line**|**100% Stacked Line**|
+|----|----|----|
+|![Line Chart Type ](images/wrd-components-tray-charts-configure-line-chart-type.png)|![Stacked Line Chart Type ](images/wrd-components-tray-charts-configure-stacked-line-type.png) |![100% Stacked Line Chart Type ](images/wrd-components-tray-charts-configure-line-100-stacked-type.png)|
+
+|**Line with Markers**|**Stacked Line with Markers**|**100% Stacked Line with Markers**|
+|----|----|----|
+|![Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-line-with-markers-chart-type.png)|![Stacked Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-stacked-line-with-markers-type.png)|![100% Stacked Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-line-with-markers-100-stacked-type.png)|
+
+## Pie Charts
+
+By clicking the `Pie` item from the **Components** tray, the *Configuration Settings* pane will appear on the right-hand side of the **Web Report Designer**. We will use the same *CSV Data Source* and configure the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*:
+
+>caption Populating Pie Chart
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/U9HMcfjAofc?si=3OCMV8NEyz8VwmaZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+According to the selected **Pie Chart Type**, the following charts will be displayed: 
+
+![Pie Chart Type ><](images/wrd-components-tray-charts-configure-pie-chart-types.png) 
+
+|Pie Chart|Doughnut Chart|
+|----|----|
+|![Area Chart Type ](images/wrd-components-tray-charts-configure-pie-chart-type.png)|![Doughnut Chart Type ](images/wrd-components-tray-charts-configure-doughnut-chart-type.png) | 
+
+## See Also
+
+* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%})
+* [Overview of the Graph Report Item]({%slug telerikreporting/designing-reports/report-structure/graph/overview%})
+
+

user-guide/components/components.md

@@ -1,40 +1,65 @@
 ---
-title: Web Report Designer - Components
-page_title: Web Report Designer - Structure
+title: Overview
+page_title: Components - Overview
 description: Explore the available report components offered by the Web Report Designer.
-slug: user-guide/components
-tags: web, report, design, report, components
+slug: web-report-designer-user-guide-components
+tags: web, report, design, report, components, overview
 published: True
 position: 0
 ---
 
 <style>
 img[alt$="><"] {
-  border: 1px solid lightgrey;
+  border: 1px solid lightgrey; 
 }
 </style>
 
-# Components
+# Components - Overview
 
-Each report is constructed by [report items]({%slug telerikreporting/designing-reports/report-structure/overview%}) organized in different groups in the **Components** tab based on their purpose. The available items are:
-
-|Group|Report Items|
-|----|----|
-|**Report Items**|<ul><li>TextBox</li><li>HtmlTextBox</li><li>PictureBox</li><li>CheckBox</li><li>Barcode</li><li>Shape</li><li>Panel</li><li>Radial Gauge Wizard</li><li>Linear Gauge Wizard</li></ul>|
-|**Tables**|<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>|
-|**Report**|<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>|
-|**Maps**|<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>|
-|**Charts**|<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>|
-|**Report Sections**|<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>|
-|**DataSources**|<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>|
-
-
-
-
-
-![Components Tray ><](images/wrd-components-tray.png)    
+Each report is constructed by [report items]({%slug user-guide/components/report-items%}) organized in different groups in the **Components** tab based on their purpose. 
+
+<div style="display: flex; align-items: flex-start; gap: 24px;">
+
+  <img alt="><" title="Components tray" src="images/wrd-components-tray.png" style="max-width:240px; height:auto; border:1px solid lightgrey;" />
+  <table style="width:100%; height:100%;">
+    <tr>
+      <th style="width:40%">Group</th><th>Report Items</th>   
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/user-guide/components/report-items">Report Items</a> - The main building parts  used in the report depending on the data that will be displayed, e.g. a TextBox item for static or data-bound text, a PictureBox for displaying images, a Barcode for showing barcode in a label report, etc.</td>
+      <td><ul><li>TextBox</li><li>HtmlTextBox</li><li>PictureBox</li><li>CheckBox</li><li>Barcode</li><li>Shape</li><li>Panel</li><li>Radial Gauge Wizard</li><li>Linear Gauge Wizard</li></ul></td>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/user-guide/components/tables">Tables</a> - The Table report item is a generalized layout report item that displays report data in cells that are organized into rows and columns.</td>
+      <td><ul><li>List</li><li>Table</li><li>Crosstab</li><li>Table Wizard</li><li>Crosstab Wizard</li></ul></td>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/user-guide/components/subreport">Report</a> - The SubReport item enables you to display reports within reports and serves as a container, similar to the report sections, growing in size depending on its children.</td>
+      <td><ul><li>SubReport</li></ul></td>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/user-guide/components/maps">Maps</a> - The Map report item is a native Telerik Reporting item which enables you to visualize an aggregated business data in a geographical manner.</td>
+      <td><ul><li>Map types: Point, Pie, Column</li><li>Choropleth</li></ul></td>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/user-guide/components/charts">Charts</a> - The Graph report item is a native Telerik Reporting item that allows you to generate different Chart types (objects) and visually present large volumes of aggregated information.</td>
+      <td><ul><li>Bar Chart</li><li>Line Chart</li><li>Area Chart</li><li>Column Chart</li><li>Pie Chart</li><li>Doughnut Chart</li></ul></td>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/user-guide/components/report-sections">Report Sections</a> - A Telerik report consists of different sections that may contain report items. Each report section represents a specific area on the report page and defines the rendering of its report items.</td>
+      <td><ul><li>Page Header</li><li>Page Footer</li><li>Report Header</li><li>Report Footer</li><li>Table of Contents</li></ul></td>
+    </tr>
+    <tr>
+      <td><a href="https://testdocs.telerik.com/reporting/user-guide/components/data-sources">DataSources</a> - Data Source components are used to connect data items to different types of data without writing any code.</td>
+      <td><ul><li>SQL Data Source</li><li>CSV Data Source</li><li>Web Service Data Source</li><li>GraphQL Data Source</li><li>JSON Data Source</li><li>Object Data Source</li></ul></td>
+    </tr>
+  </table>
+</div>
 
+## Next Steps
 
+* [Report Items]({%slug user-guide/components/report-items%})
+* [Configuring DataSources]({%slug web-report-designer-user-guide-components-data-sources%})
 
 ## See Also