radar charts (#167)

* docs(chart): radar area chart

* docs(chart): radar column chart

* docs(chart): radar line series

* chore(chart): improve radar series urls

* chore(chart): improve formatting of intro sentences to types charts creation

* chore(chart): fix radar line series style setting location

Author: marin-bratanov

_config.yml

@@ -393,9 +393,12 @@ intro_columns:
       "Donut Charts": "components/chart/types/donut"
       "Bubble Charts": "components/chart/types/bubble"
       "Scatter Charts": "components/chart/types/scatter"
-      "ScatterLine Charts": "components/chart/types/scatterline"
+      "Scatter Line Charts": "components/chart/types/scatterline"
       "Candlestick Charts": "chart-types-candlestick"
       "OHLC Charts": "chart-types-ohlc"
+      "Radar Area Charts": "chart-types-radararea"
+      "Radar Column Charts": "chart-types-radarcolumn"
+      "Radar Line Charts": "chart-types-radarline"
       "Stock Chart": "stockchart-overview"
 
   -

_contentTemplates/chart/link-to-basics.md

@@ -131,7 +131,7 @@ You can control how transparent the series fill is through the `Opacity` propert
 
 
 #tip-look-for-nested-tags
->tip To customize the chart, look for nested tags and heir properties - the inner tags will contain their parent tag name and add specifics to its end. For example, the `ChartSeries` tag has a `ChartSeriesLabels` tag that exposes configuration otions and more child tags.
+>tip To customize the chart, look for nested tags and their properties - the inner tags will contain their parent tag name and add specifics to its end. For example, the `ChartSeries` tag has a `ChartSeriesLabels` tag that exposes configuration options and more child tags.
 #end
 
 

components/chart/types/area.md

@@ -10,7 +10,7 @@ position: 0
 
 # Area Chart
 
-An <a href="https://www.telerik.com/blazor-ui/area-chart" target="_blank">Blazor Area chart</a> shows the data as continuous lines that pass through points defined by their items' values. The portion of the graph beneath the lines is filled with a particular color for every series. Colors in an Area chart can be useful for emphasizing changes in values from several sets of similar data. A colored background will clearly visualize the differences.
+The <a href="https://www.telerik.com/blazor-ui/area-chart" target="_blank">Blazor Area chart</a> shows the data as continuous lines that pass through points defined by their items' values. The portion of the graph beneath the lines is filled with a particular color for every series. Colors in an Area chart can be useful for emphasizing changes in values from several sets of similar data. A colored background will clearly visualize the differences.
 
 
 An Area chart emphasizes the volume of money, data or any other unit that the given series has encompassed. When backgrounds are semi-transparent, it lets the user clearly see where different sets of data overlap.
@@ -21,7 +21,7 @@ An Area chart emphasizes the volume of money, data or any other unit that the gi
 
 @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
 
-To create an area chart:
+#### To create an area chart:
 
 1. add a `ChartSeries` to the `ChartSeriesItems` collection
 2. set its `Type` property to `ChartSeriesType.Area`

components/chart/types/bar.md

@@ -10,15 +10,15 @@ position: 0
 
 # Bar Chart
 
-A <a href="https://www.telerik.com/blazor-ui/bar-chart" target="_blank">Blazor Bar chart</a> displays data as horizontal bars whose lengths vary according to their value. You can use a Bar chart to show a comparison between several sets of data (for example, summaries of sales data for different time periods). Each series is automatically colored differently for easier reading.
+The <a href="https://www.telerik.com/blazor-ui/bar-chart" target="_blank">Blazor Bar chart</a> displays data as horizontal bars whose lengths vary according to their value. You can use a Bar chart to show a comparison between several sets of data (for example, summaries of sales data for different time periods). Each series is automatically colored differently for easier reading.
 
 >caption Bar chart. Results from the first code snippet below
 
 ![](images/basic-bar-chart.png)
 
 @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
 
-To create a bar chart:
+#### To create a bar chart:
 
 1. add a `ChartSeries` to the `ChartSeriesItems` collection
 2. set its `Type` property to `ChartSeriesType.Bar`

components/chart/types/bubble.md

@@ -10,7 +10,7 @@ position: 0
 
 # Bubble Chart
 
-A <a href="https://www.telerik.com/blazor-ui/bubble-chart" target="_blank">Blazor Bubble chart</a> shows the data as points with coordinates and size defined by their items' values. You might think of a Bubble chart as a variation of the [Scatter chart]({%slug components/chart/types/scatter%}), in which the data points are replaced with bubbles. This allows a Bubble chart to display three dimensional data — two values for the items' coordinates and one for their size.
+The <a href="https://www.telerik.com/blazor-ui/bubble-chart" target="_blank">Blazor Bubble chart</a> shows the data as points with coordinates and size defined by their items' values. You might think of a Bubble chart as a variation of the [Scatter chart]({%slug components/chart/types/scatter%}), in which the data points are replaced with bubbles. This allows a Bubble chart to display three dimensional data — two values for the items' coordinates and one for their size.
 
 A Bubble chart is useful for visualizing different scientific relationships (e.g, economical, social, etc.). This chart type's x-axis is also numerical and does not require items.
 
@@ -20,7 +20,7 @@ A Bubble chart is useful for visualizing different scientific relationships (e.g
 
 @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
 
-To create a bubble chart:
+#### To create a bubble chart:
 
 1. add a `ChartSeries` to the `ChartSeriesItems` collection
 2. set its `Type` property to `ChartSeriesType.Bubble`

components/chart/types/candlestick.md

@@ -10,15 +10,15 @@ position: 0
 
 # Candlestick Chart
 
-A **Candlestick** chart shows data for the movement of the price of a financial unit. It consists of a bar (the candle), representing the open and close values, and vertical lines, the candlesticks, which illustrate the highest and lowest values.
+The **Candlestick** chart shows data for the movement of the price of a financial unit. It consists of a bar (the candle), representing the open and close values, and vertical lines, the candlesticks, which illustrate the highest and lowest values.
 
 >caption Candlestick chart. Results from the first code snippet below
 
 ![](images/basic-candlestick-chart.png)
 
 @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
 
-To create a candlestick chart:
+#### To create a candlestick chart:
 
 1. add a `ChartSeries` to the `ChartSeriesItems` collection
 2. set its `Type` property to `ChartSeriesType.Candlestick`

components/chart/types/column.md

@@ -10,15 +10,15 @@ position: 0
 
 # Column Chart
 
-A <a href="https://www.telerik.com/blazor-ui/column-chart" target="_blank">Blazor Column chart</a> displays data as vertical bars whose heights vary according to their value. You can use a Column chart to show a comparison between several sets of data (for example, summaries of sales data for different time periods). Each series is automatically colored differently for easier reading.
+The <a href="https://www.telerik.com/blazor-ui/column-chart" target="_blank">Blazor Column chart</a> displays data as vertical bars whose heights vary according to their value. You can use a Column chart to show a comparison between several sets of data (for example, summaries of sales data for different time periods). Each series is automatically colored differently for easier reading.
 
 >caption Column chart.  Results from the first code snippet below
 
 ![](images/basic-column-chart.png)
 
 @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
 
-To create a column chart:
+#### To create a column chart:
 
 1. add a `ChartSeries` to the `ChartSeriesItems` collection
 2. set its `Type` property to `ChartSeriesType.Column`
@@ -59,20 +59,20 @@ Column series
 
 ## Column Chart Specific Appearance Settings
 
-### Markers
+### Labels
 
-Each data item is denoted with a marker (label). You can control and customize them through the `< ChartCategoryAxisLabels />` and its children tags.
+Each data item is decorated with a text label. You can control and customize them through the `<ChartCategoryAxisLabels />` and its children tags.
 
-* `Visible` - hide all markers by setting this parameter to `false`.
-* `Step` - renders every n-th marker, where n is the value(double number) passed to the parameter.
-* `Skip` - skips the first n markers, where n is the value(double number) passed to the parameter.
-* `Angle` - rotates the markers with the desired angle by n degrees, where n is the value passed to the parameter. It can take positive and negative numbers. To set this parameter use the `< ChartCategoryAxisLabelsRotation />` child tag.
+* `Visible` - hide all labels by setting this parameter to `false`.
+* `Step` - renders every n-th labels, where n is the value(double number) passed to the parameter.
+* `Skip` - skips the first n labels, where n is the value (double number) passed to the parameter.
+* `Angle` - rotates the labels with the desired angle by n degrees, where n is the value passed to the parameter. It can take positive and negative numbers. To set this parameter use the `< ChartCategoryAxisLabelsRotation />` child tag.
 
 To rotate the markers use the `ChartCategoryAxisLabelsRotation` child tag and set its `Angle` parameter. It can take positive and negative numbers as value.
 
 ### Color
 
-The color of a series is controlled through the `Color` property that can take any valid CSS color (for example, `#abcdef`, `#f00`, or `blue`). The color control the fill color of the area.
+The color of a series is controlled through the `Color` property that can take any valid CSS color (for example, `#abcdef`, `#f00`, or `blue`).
 
 @[template](/_contentTemplates/chart/link-to-basics.md#color-field-bar-column)
 

components/chart/types/donut.md

@@ -18,7 +18,7 @@ The <a href="https://www.telerik.com/blazor-ui/donut-chart" target="_blank">Blaz
 
 @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
 
-To create a donut chart:
+#### To create a donut chart:
 
 1. add a `ChartSeries` to the `ChartSeriesItems` collection
 2. set its `Type` property to `ChartSeriesType.Donut`