|
| 1 | +--- |
| 2 | +title: Charts |
| 3 | +page_title: Charts |
| 4 | +description: Explore the available Chart report components offered by the Web Report Designer. |
| 5 | +slug: web-report-designer-user-guide-components-charts |
| 6 | +tags: web, report, design, components, chart, bar, line, area, column, pie, doughnut, polar, range, scatter, bubble, sparkline, ohlc |
| 7 | +published: True |
| 8 | +position: 5 |
| 9 | +--- |
| 10 | + |
| 11 | +<style> |
| 12 | +img[alt$="><"] { |
| 13 | + border: 1px solid lightgrey; |
| 14 | +} |
| 15 | +</style> |
| 16 | + |
| 17 | +# Charts |
| 18 | + |
| 19 | +The Chart components in the Web Report Designer allow users to visualize data records from different [Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) storages. Charts transform numerical data into visual representations, making it easier to identify patterns, trends, and relationships in your data. |
| 20 | + |
| 21 | +You can use Charts to represent: |
| 22 | + |
| 23 | +* Trend Analysis—Show data changes over time using Line or Area charts. |
| 24 | +* Comparison Analysis—Compare values across categories using Bar or Column charts. |
| 25 | +* Part-to-Whole Analysis—Display proportional relationships using Pie or Doughnut charts. |
| 26 | +* Performance Dashboards—Create visual scorecards and KPI displays. |
| 27 | +* Financial Reporting—Present sales figures, revenue trends, and budget comparisons. |
| 28 | +* Statistical Reports—Visualize survey results, demographic data, and analytical findings. |
| 29 | + |
| 30 | + |
| 31 | + |
| 32 | +## Chart Types |
| 33 | + |
| 34 | +The Web Report Designer provides the following chart types: |
| 35 | + |
| 36 | +* [Bar Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-bar-chart)—Displays data series as sets of horizontal bars, ideal for comparing amounts or values between different categories. |
| 37 | +* [Line Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-line-chart)—Displays series as sets of points connected by lines, perfect for showing trends over continuous periods. |
| 38 | +* [Area Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-an-area-chart)—Shows data as filled areas under lines, emphasizing volume and cumulative totals. |
| 39 | +* [Column Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-column-chart)—Displays data series as sets of vertical bars that are grouped by category. |
| 40 | +* [Pie Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-pie-or-doughnut-chart)—Shows the contribution of fractional parts to a whole, commonly used for proportion comparisons. |
| 41 | +* [Doughnut Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-pie-or-doughnut-chart)—Similar to Pie Chart but with an open space in the center, allowing for additional information display. |
| 42 | + |
| 43 | +## Chart Categories |
| 44 | + |
| 45 | +The Web Report Designer supports two main chart categories: |
| 46 | + |
| 47 | +* **Cartesian Charts** (Bar, Line, Column, Area)—Use the Cartesian coordinate system to plot data points in chart series. The X and Y axes define how each point's coordinates in the plot area are calculated. Cartesian charts provide a mechanism for combining data points that reside in different series but have the same category. The combine mode can be: |
| 48 | + |
| 49 | + * **Cluster**—Data points in the same category are positioned close together. |
| 50 | + * **Stack**—Data points are plotted on top of each other. |
| 51 | + * **Stack100**—Values of one series are presented as a percentage of the other series. |
| 52 | + |
| 53 | +* **Pie Charts** (Pie, Doughnut)—Use the Radial coordinate system to plot each point as an arc segment where the arc's length represents the percentage this point's value is from the total sum. |
| 54 | + |
| 55 | +The following sections demonstrate how to add different chart types and illustrate how CSV data is presented in each chart. |
| 56 | + |
| 57 | +>note The **Configuration** pane on the right-hand side is identical for all chart types, allowing users to specify the Data Source and configure the Categories, Series and Values groups. |
| 58 | +
|
| 59 | +## Adding a Chart to a Report |
| 60 | + |
| 61 | +The next sections in this article demonstrate how to add each of the available [chart types](#chart-types) to your report. To follow along the steps below, make sure to add the proposed [data source](#adding-data-source) first. |
| 62 | + |
| 63 | +### Adding Data Source |
| 64 | + |
| 65 | +For this tutorial, use the following sample CSV data to create a CSV Data Source that will be used throughout this article: |
| 66 | + |
| 67 | +```csv |
| 68 | +Category,Year,Value |
| 69 | +Accessories,2003,230 |
| 70 | +Accessories,2004,340 |
| 71 | +Bikes,2001,150 |
| 72 | +Bikes,2002,195 |
| 73 | +Bikes,2003,340 |
| 74 | +Bikes,2004,265 |
| 75 | +Clothing,2002,80 |
| 76 | +Clothing,2003,120 |
| 77 | +Clothing,2004,110 |
| 78 | +Components,2001,230 |
| 79 | +Components,2002,140 |
| 80 | +Components,2003,280 |
| 81 | +Components,2004,310 |
| 82 | +``` |
| 83 | + |
| 84 | +<iframe width="560" height="315" src="https://www.youtube.com/embed/d34jlpfD94Q?si=jCgcgEMH9y2AQGOU" title="Adding a CSV Data Source in the Telerik Web Report Designer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> |
| 85 | + |
| 86 | +After adding the data source to your report, continue by adding the desired chart type. |
| 87 | + |
| 88 | +### Adding a Bar Chart |
| 89 | + |
| 90 | +To create a Bar Chart, follow the steps below. See the video after the steps for a detailed walk-through. |
| 91 | + |
| 92 | +1. Click the **Bar** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer. |
| 93 | + |
| 94 | +1. Set the [data source](#adding-data-source) for the Chart. |
| 95 | + |
| 96 | +1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display. |
| 97 | + |
| 98 | +1. Optionally, change the Chart type. |
| 99 | + |
| 100 | +>caption Adding a Bar Chart and populating it with data |
| 101 | +
|
| 102 | +<iframe width="560" height="315" src="https://www.youtube.com/embed/-bCYlj5Qtwg?si=VgbqrDrNDA3zDvA_" title="Adding a Bar Chart in the Telerik Web Report Designer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> |
| 103 | + |
| 104 | +Based on the Bar Chart type that you select during the configuration, one of the following charts will be displayed: |
| 105 | + |
| 106 | +|Clustered Bar|Stacked Bar|100% Stacked Bar| |
| 107 | +|----|----|----| |
| 108 | +||| | |
| 109 | + |
| 110 | +### Adding a Column Chart |
| 111 | + |
| 112 | +To create a Column Chart, follow the steps below. See the video after the steps for a detailed walk-through. |
| 113 | + |
| 114 | +1. Click the **Column** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer. |
| 115 | + |
| 116 | +1. Set the [data source](#adding-data-source) for the Chart. |
| 117 | + |
| 118 | +1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display. |
| 119 | + |
| 120 | +1. Optionally, change the Chart type. |
| 121 | + |
| 122 | +>caption Adding a Column Chart and populating it with data |
| 123 | +
|
| 124 | +<iframe width="560" height="315" src="https://www.youtube.com/embed/RGJa5FLZ5A8?si=vxsKE8GwK2jFFnIv" title="Adding a Column Chart Item in the Telerik Web Report Designer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> |
| 125 | + |
| 126 | +Based on the Column Chart type that you select during the configuration, one of the following charts will be displayed: |
| 127 | + |
| 128 | +|Clustered Column|Stacked Column|100% Stacked Column| |
| 129 | +|----|----|----| |
| 130 | +|||  | |
| 131 | + |
| 132 | +### Adding an Area Chart |
| 133 | + |
| 134 | +To create an Area Chart, follow the steps below. See the video after the steps for a detailed walk-through. |
| 135 | + |
| 136 | +1. Click the **Area** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer. |
| 137 | + |
| 138 | +1. Set the [data source](#adding-data-source) for the Chart. |
| 139 | + |
| 140 | +1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display. |
| 141 | + |
| 142 | +1. Optionally, change the Chart type. |
| 143 | + |
| 144 | +>caption Adding an Area Chart and populating it with data |
| 145 | +
|
| 146 | +<iframe width="560" height="315" src="https://www.youtube.com/embed/Eygyvp6y1zk?si=ObaAThjMoEajmB6H" title="Adding an Area Chart Item in the Telerik Web Report Designer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> |
| 147 | + |
| 148 | +Based on the Column Chart type that you select during the configuration, one of the following charts will be displayed: |
| 149 | + |
| 150 | +|Area|Stacked Area|100% Stacked Area| |
| 151 | +|----|----|----| |
| 152 | +|||| |
| 153 | + |
| 154 | +### Adding a Line Chart |
| 155 | + |
| 156 | +To create a Line Chart, follow the steps below. See the video after the steps for a detailed walk-through. |
| 157 | + |
| 158 | +1. Click the **Line** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer. |
| 159 | + |
| 160 | +1. Set the [data source](#adding-data-source) for the Chart. |
| 161 | + |
| 162 | +1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display. |
| 163 | + |
| 164 | +1. Optionally, change the Chart type. |
| 165 | + |
| 166 | +>caption Adding a Line Chart and populating it with data |
| 167 | +
|
| 168 | +<iframe width="560" height="315" src="https://www.youtube.com/embed/jEP0YrFUG68?si=N5VuLs9tUHQ0I4CW" title="Adding a Line Chart Item in the Telerik Web Report Designer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> |
| 169 | + |
| 170 | +Based on the Line Chart type that you select during the configuration, one of the following charts will be displayed: |
| 171 | + |
| 172 | +|Line|Stacked Line|100% Stacked Line| |
| 173 | +|----|----|----| |
| 174 | +|||| |
| 175 | + |
| 176 | +|Line with Markers|Stacked Line with Markers|100% Stacked Line with Markers| |
| 177 | +|----|----|----| |
| 178 | +|||| |
| 179 | + |
| 180 | +### Adding a Pie or Doughnut Chart |
| 181 | + |
| 182 | +To create a Pie or Doughnut Chart, follow the steps below. See the videos after the steps for a detailed walk-through. |
| 183 | + |
| 184 | +1. Click the **Pie** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer. |
| 185 | + |
| 186 | +1. Set the [data source](#adding-data-source) for the Chart. |
| 187 | + |
| 188 | +1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display. |
| 189 | + |
| 190 | +1. Optionally, change the Chart type (Pie or Doughnut). |
| 191 | + |
| 192 | +Based on the Pie Chart type that you select during the configuration, one of the following charts will be displayed: |
| 193 | + |
| 194 | +|Pie Chart|Doughnut Chart| |
| 195 | +|----|----| |
| 196 | +||| |
| 197 | + |
| 198 | +>caption Adding a Pie Chart and populating it with data |
| 199 | +
|
| 200 | +<iframe width="560" height="315" src="https://www.youtube.com/embed/SPLPy_jAsJM?si=iYhK6Tm_W0DujcwD" title="Adding a Pie Chart Item in the Telerik Web Report Designer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> |
| 201 | + |
| 202 | +>caption Adding a Doughnut Chart and populating it with data |
| 203 | +
|
| 204 | +<iframe width="560" height="315" src="https://www.youtube.com/embed/-udr8lSSSCg?si=gBuPnvgRwdyIJ8vq" title="Adding a Doughnut Chart Item in the Telerik Web Report Designer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> |
| 205 | + |
| 206 | +## See Also |
| 207 | + |
| 208 | +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) |
| 209 | +* [Overview of the Graph Report Item]({%slug telerikreporting/designing-reports/report-structure/graph/overview%}) |
| 210 | +* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) |
0 commit comments