docs(chart): Add documentation for range series types

components/chart/types/area.md

@@ -16,6 +16,8 @@ The <a href="https://www.telerik.com/blazor-ui/area-chart" target="_blank">Blazo
 
 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.
 
+The Area Chart is similar to the [Range Area Chart]({%slug components/chart/types/rangearea%}), which allows the area to raise above the horizontal axis.
+
 @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
 
 #### To create an area chart:

components/chart/types/bar.md

@@ -14,6 +14,8 @@ The <a href="https://www.telerik.com/blazor-ui/bar-chart" target="_blank">Blazor
 
 ![bar chart](images/bar-chart.png)
 
+The Bar Chart is similar to the [Range Bar Chart]({%slug components/chart/types/rangebar%}), which allows the bar to move away from the category axis.
+
 @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
 
 #### To create a bar chart:

components/chart/types/column.md

@@ -14,9 +14,9 @@ The <a href="https://www.telerik.com/blazor-ui/column-chart" target="_blank">Bla
 
 ![column chart](images/column-chart.png)
 
-@[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
+The Column Chart is similar to the [Range Column Chart]({%slug components/chart/types/rangecolumn%}), which allows the column's low end to start above the horizontal axis.
 
-@[template](/_contentTemplates/date-inputs/general.md#format-placeholder)
+@[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
 
 #### To create a column chart:
 

components/chart/types/rangearea.md

@@ -0,0 +1,205 @@
+---
+title: Range Area
+page_title: Chart - Range Area
+description: Overview of the Range Area Chart for Blazor with a description of the common use cases and the different ways to data bind the chart. The article lists configuration options and provides Range Area Chart examples.
+slug: components/chart/types/rangearea
+tags: telerik,blazor,chart,rangearea
+published: True
+position: 0
+---
+
+# Range Area Chart
+
+The <a href="https://www.telerik.com/blazor-ui/range-area-chart" target="_blank">Blazor Range Area Chart</a> shows the data as a colored area between two continuous lines that pass through points defined by pairs of `from` and `to` values. The graph between the border lines has a different customizable color for each series. The Range Area Chart is similar to the [Area Chart]({%slug components/chart/types/area%}), which can be regarded as a Range Area Chart with a constant `from` value of zero.
+
+You can use the Range Area Chart to emphasize the difference between pairs of continuous value sequences.
+
+By default, the series backgrounds are semi-transparent, which lets the user clearly see where different sets of data overlap.
+
+@[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
+
+## Creating Blazor Range Area Chart
+
+1. Add a `ChartSeries` to the `ChartSeriesItems` collection.
+2. Set its `Type` property to `ChartSeriesType.RangeArea`.
+3. Provide a data collection to its `Data` property. You can use a [collection of arrays](#bind-range-area-series-to-collection-of-arrays) or a [collection of custom objects](#bind-range-area-series-to-custom-objects).
+4. If the Range Area data is a collection of arrays, provide data for the `Categories` parameter of the `ChartCategoryAxis`.
+
+### Bind Range Area Series to Collection of Arrays
+
+In this case, set the `ChartSeries` `Data` parameter to a `List` of arrays or a jagged array (an array of arrays). The inner arrays should have two members - one for the lower `from` value, and one for the higher `to` value.
+
+In addition, set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The members of this array will be used as labels for the category axis in their respective order.
+
+>caption Blazor Range Area Chart bound to arrays
+
+````CSHTML
+<TelerikChart>
+    <ChartSeriesItems>
+        <ChartSeries Name="Sydney"
+                     Data="@SydneyData"
+                     Type="ChartSeriesType.RangeArea">
+        </ChartSeries>
+        <ChartSeries Name="Sofia"
+                     Data="@SofiaData"
+                     Type="ChartSeriesType.RangeArea">
+        </ChartSeries>
+    </ChartSeriesItems>
+
+    <ChartCategoryAxes>
+        <ChartCategoryAxis Categories="@MonthNames" />
+    </ChartCategoryAxes>
+
+    <ChartTooltip Visible="true"></ChartTooltip>
+
+    <ChartTitle Text="Monthly Temperatures"></ChartTitle>
+
+    <ChartLegend Position="ChartLegendPosition.Right"></ChartLegend>
+</TelerikChart>
+
+@code {
+    // The RangeArea series Data can be any collection of arrays
+
+    private List<double[]> SydneyData { get; set; } = new List<double[]>
+    {
+        new double[] { 20, 27 },
+        new double[] { 19.9, 26.8 },
+        new double[] { 18.4, 25.7 },
+        new double[] { 15.3, 23.6 },
+        new double[] { 12.3, 20.9 },
+        new double[] { 10, 18.3 },
+        new double[] { 8.9, 17.9 },
+        new double[] { 9.7, 19.3 },
+        new double[] { 12.3, 21.6 },
+        new double[] { 14.6, 23.2 },
+        new double[] { 16.6, 24.2 },
+        new double[] { 18.4, 25.7 }
+    };
+
+    private double[][] SofiaData { get; set; } = new double[][]
+    {
+        new double[] { -3.8, 3.6 },
+        new double[] { -2.3, 6.5 },
+        new double[] { 1.1, 11.5 },
+        new double[] { 5.4, 16.7 },
+        new double[] { 9.9, 21.4 },
+        new double[] { 13.4, 25.3 },
+        new double[] { 15.3, 27.9 },
+        new double[] { 15.3, 28.4 },
+        new double[] { 11.1, 23.3 },
+        new double[] { 6.7, 17.6 },
+        new double[] { 2.2, 10.7 },
+        new double[] { -2.3, 4.6 }
+            };
+
+    private object[] MonthNames = new string[] {
+        "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
+    };
+}
+````
+
+### Bind Range Area Series to Custom Objects
+
+In this case, set the `ChartSeries` `Data` parameter to an `IEnumerable<T>`. Then, set the `FromField`, `ToField` and `CategoryField` parameters of the `ChartSeries` to properties of the `T` type.
+
+>caption Blazor Range Area Chart bound to custom objects
+
+````CSHTML
+<TelerikChart>
+    <ChartSeriesItems>
+        <ChartSeries Name="Test Tube 1"
+                     Data="@Tube1Data"
+                     Type="ChartSeriesType.RangeArea"
+                     FromField="@nameof(AreaDataPoint.LowValue)"
+                     ToField="@nameof(AreaDataPoint.HighValue)"
+                     CategoryField="@nameof(AreaDataPoint.Hour)">
+        </ChartSeries>
+        <ChartSeries Name="Test Tube 2"
+                     Data="@Tube2Data"
+                     Type="ChartSeriesType.RangeArea"
+                     FromField="@nameof(AreaDataPoint.LowValue)"
+                     ToField="@nameof(AreaDataPoint.HighValue)"
+                     CategoryField="@nameof(AreaDataPoint.Hour)">
+        </ChartSeries>
+    </ChartSeriesItems>
+
+    <ChartTooltip Visible="true"></ChartTooltip>
+
+    <ChartTitle Text="Laboratory Measurements"></ChartTitle>
+
+    <ChartLegend Position="ChartLegendPosition.Right"></ChartLegend>
+</TelerikChart>
+
+@code {
+    private List<AreaDataPoint> Tube1Data { get; set; } = new List<AreaDataPoint>();
+
+    private List<AreaDataPoint> Tube2Data { get; set; } = new List<AreaDataPoint>();
+
+    protected override void OnInitialized()
+    {
+        var rnd = new Random();
+        var dataPointCount = 10;
+
+        for (int i = 1; i <= dataPointCount; i++)
+        {
+            Tube1Data.Add(new AreaDataPoint()
+            {
+                Hour = i,
+                LowValue = rnd.Next(5 * i, 10 * i),
+                HighValue = rnd.Next(15 * i, 20 * i + 5)
+            });
+
+            Tube2Data.Add(new AreaDataPoint()
+            {
+                Hour = i,
+                LowValue = rnd.Next(5 * (dataPointCount + 1 - i), 10 * (dataPointCount + 1 - i)),
+                HighValue = rnd.Next(15 * (dataPointCount + 1 - i), 20 * (dataPointCount + 1 - i))
+            });
+        }
+    }
+
+    public class AreaDataPoint
+    {
+        public int Hour { get; set; }
+        public int LowValue { get; set; }
+        public int HighValue { get; set; }
+    }
+}
+````
+
+
+## Range Area Chart Specific Appearance Settings
+
+### 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.
+
+You can control the color of the line itself separately by using the `Color` property of the nested `TelerikChartSeriesLine` tag.
+
+@[template](/_contentTemplates/chart/link-to-basics.md#opacity-area-bubble)
+
+### Missing Values
+
+If *both* values in a range pair are missing or `null`, you can have the Chart work around this by setting the `MissingValues` property of the series to the desired behavior. Use a member of the `Telerik.Blazor.ChartSeriesMissingValues` enum:
+
+* `Zero` - the default behavior. The two lines and the area between them will go to the 0 value mark.
+* `Interpolate` - the lines and area will go through the interpolated values of the missing data points and connect to the next data points with a value.
+* `Gap` - there will be empty space in the range area until the next pair of values.
+
+
+### Line Style
+
+You can render the lines between the points with different styles. The supported styles can be set via the `Style` property of the child `ChartSeriesLine` tag - it takes a member of `Telerik.Blazor.ChartSeriesLineStyle` enum:
+
+* `Normal`—This is the default style. It produces a straight line between data points.
+* `Step`—The style renders the connection between data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes.
+* `Smooth`—This style causes the Area Chart to display a fitted curve through data points. It is suitable when the data requires to be displayed with a curve, or when you wish to connect the points with smooth instead of straight lines.
+
+@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings)
+
+@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings-categorical)
+
+
+## See Also
+
+* [Live Demo: Range Area Chart](https://demos.telerik.com/blazor-ui/chart/range-area-chart)

components/chart/types/rangebar.md

@@ -0,0 +1,150 @@
+---
+title: Range Bar
+page_title: Chart - Range Bar
+description: Overview of the Range Bar Chart for Blazor with a description of the common use cases and the different ways to data bind the chart. The article lists configuration options and provides Range Bar Chart examples.
+slug: components/chart/types/rangebar
+tags: telerik,blazor,chart,rangebar
+published: True
+position: 0
+---
+
+# Range Bar Chart
+
+The <a href="https://www.telerik.com/blazor-ui/range-bar-chart" target="_blank">Blazor Range Bar chart</a> displays data as horizontal bars whose position and length vary according to their values. You can use a Range Bar chart to show a comparison between several sets of data (for example, summaries of quantative or time data). Each series is automatically colored differently for easier reading. The Range Bar Chart is similar to the [Bar Chart]({%slug components/chart/types/bar%}). The latter can be regarded as a Range Bar Chart with a "low" ("from") value of zero.
+
+@[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
+
+## Creating Blazor Range Bar Chart
+
+1. Add a `ChartSeries` to the `ChartSeriesItems` collection.
+2. Set its `Type` property to `ChartSeriesType.RangeBar`.
+3. Provide a data collection to its `Data` property. You can use a [collection of arrays](#bind-range-column-series-to-collection-of-arrays) or a [collection of custom objects](#bind-range-column-series-to-custom-objects).
+4. If the Range Bar data is a collection of arrays, provide data for the `Categories` parameter of the `ChartCategoryAxis`.
+
+### Bind Range Bar Series to Collection of Arrays
+
+In this case, set the `ChartSeries` `Data` parameter to a `List` of arrays or a jagged array (an array of arrays). The inner arrays should have two members - one for the "low" ("from") value, and one for the "high" ("to") value.
+
+In addition, set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The members of this array will be used as labels for the category axis in their respective order.
+
+>caption Blazor Range Bar Chart bound to arrays
+
+````CSHTML
+<TelerikChart>
+    <ChartTitle Text="Sleep Hours by Age"></ChartTitle>
+
+    <ChartSeriesItems>
+        <ChartSeries Type="ChartSeriesType.RangeBar" Data="@SleepData">
+        </ChartSeries>
+    </ChartSeriesItems>
+
+    <ChartCategoryAxes>
+        <ChartCategoryAxis Categories="@Categories"></ChartCategoryAxis>
+    </ChartCategoryAxes>
+
+    <ChartValueAxes>
+        <ChartValueAxis Min="4"></ChartValueAxis>
+    </ChartValueAxes>
+
+    <ChartTooltip Visible="true">
+        <Template>
+            @{
+                var dataItem = (int[])context.DataItem;
+            }
+            <span>@dataItem[0] - @dataItem[1] hours</span>
+        </Template>
+    </ChartTooltip>
+
+</TelerikChart>
+
+@code {
+    private List<int[]> SleepData = new List<int[]>() {
+        new int[] { 14, 17 },
+        new int[] { 12, 16 },
+        new int[] { 11, 14 },
+        new int[] { 10, 13 },
+        new int[] { 9, 12 },
+        new int[] { 8, 10 },
+        new int[] { 7, 9 },
+        new int[] { 7, 8 }
+    };
+
+    private string[] Categories = new string[] {
+        "0–3 m", "4-12 m", "1-2 y", "3-5 y", "6-12 y", "13-18 y", "18-60 y", "60+ y"
+    };
+}
+````
+
+### Bind Range Column Series to Custom Objects
+
+In this case, set the `ChartSeries` `Data` parameter to an `IEnumerable<T>`. Then, set the `FromField`, `ToField` and `CategoryField` parameters of the `ChartSeries` to properties of the `T` type.
+
+>caption Blazor Range Bar Chart bound to custom objects
+
+````CSHTML
+<TelerikChart>
+    <ChartTitle Text="Sleep Hours by Age"></ChartTitle>
+
+    <ChartSeriesItems>
+        <ChartSeries Type="ChartSeriesType.RangeBar"
+                     Data="@SleepData"
+                     FromField="@(nameof(RangeBarModel.LowValue))"
+                     ToField="@(nameof(RangeBarModel.HighValue))"
+                     CategoryField="@(nameof(RangeBarModel.AgeGroup))">
+        </ChartSeries>
+    </ChartSeriesItems>
+
+    <ChartValueAxes>
+        <ChartValueAxis Min="4"></ChartValueAxis>
+    </ChartValueAxes>
+
+    <ChartTooltip Visible="true">
+        <Template>
+            @{
+                var dataItem = (RangeBarModel)context.DataItem;
+            }
+            <span>@dataItem.LowValue - @dataItem.HighValue hours</span>
+        </Template>
+    </ChartTooltip>
+
+</TelerikChart>
+
+@code {
+    private List<RangeBarModel> SleepData = new List<RangeBarModel>() {
+        new RangeBarModel { LowValue = 14, HighValue = 17, AgeGroup = "0-3 m" },
+        new RangeBarModel { LowValue = 12, HighValue = 16, AgeGroup = "4-12 m" },
+        new RangeBarModel { LowValue = 11, HighValue = 14, AgeGroup = "1-2 y" },
+        new RangeBarModel { LowValue = 10, HighValue = 13, AgeGroup = "3-5 y" },
+        new RangeBarModel { LowValue = 9, HighValue = 12, AgeGroup = "6-12 y" },
+        new RangeBarModel { LowValue = 8, HighValue = 10, AgeGroup = "13-18 y" },
+        new RangeBarModel { LowValue = 7, HighValue = 9, AgeGroup = "18-60 y" },
+        new RangeBarModel { LowValue = 7, HighValue = 8, AgeGroup = "60+ y" }
+    };
+
+    public class RangeBarModel
+    {
+        public string AgeGroup { get; set; }
+        public int LowValue { get; set; }
+        public int HighValue { get; set; }
+    }
+}
+````
+
+## Range Bar Chart Specific Appearance Settings
+
+### 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.
+
+@[template](/_contentTemplates/chart/link-to-basics.md#color-field-bar-column)
+
+@[template](/_contentTemplates/chart/link-to-basics.md#gap-and-spacing)
+
+@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings)
+
+@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings-categorical)
+
+
+## See Also
+
+* [Live Demo: Range Bar Chart](https://demos.telerik.com/blazor-ui/chart/range-bar-chart)