# 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 pairs of `from` and `to` values. You can use a Range Bar Chart to show a comparison between several sets of data (for example, summaries of quantitative or time data). Each series is automatically colored differently for easier reading. The Range Bar Chart is similar to the [Bar Chart](https://www.telerik.com/blazor-ui/documentation/components/chart/types/bar), which can be regarded as a Range Bar Chart with zero `from` values.

This article assumes you are familiar with the [chart basics](https://www.telerik.com/blazor-ui/documentation/components/chart/overview) and [data binding](https://www.telerik.com/blazor-ui/documentation/components/chart/data-bind).

## Creating Blazor Range Bar Chart

1. Add a `ChartSeries` to the `ChartSeriesItems` collection.
2. Set the series `Type` parameter to `ChartSeriesType.RangeBar`.
3. Provide a data collection to the series `Data` parameter. You can use a [collection of arrays](https://www.telerik.com/blazor-ui/documentation/components/chart/types/rangebar#binding-range-bar-series-to-collection-of-arrays) or a [collection of custom objects](https://www.telerik.com/blazor-ui/documentation/components/chart/types/rangebar#binding-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`.
5. (optional) Set `Visible="true"` or define [label `Template`](https://www.telerik.com/blazor-ui/documentation/components/chart/labels-template-and-format) for `<ChartSeriesLabelsFrom>` or `<ChartSeriesLabelsTo>`. These are nested tags inside `<ChartSeriesLabels>` of the respective `<ChartSeries>`.

### Binding Range Bar Series to Collection of Arrays

Set the `ChartSeries` `Data` parameter to a `List` of arrays or a jagged array (an array of arrays). The inner arrays must have two members—a lower one for the `from` value, and a higher one for `to` value.

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

<demo metaUrl="client/chart/types/rangebar/array-binding/" height="500"></demo>

### Binding Range Column Series to Custom Objects

1. Set the `ChartSeries` `Data` parameter to an `IEnumerable<T>`.
2. 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

<demo metaUrl="client/chart/types/rangebar/custom-object-binding/" height="500"></demo>

## 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 controls the fill color of the area.

### Color Field

Bar and Column charts can take the color of the series item from the `ColorField` of the data source. You can pass a valid CSS color (for example, `#abcdef`, `#f00`, or `blue`).

<demo metaUrl="client/chart/types/bar/color-field/" height="500"></demo>

### Gap and Spacing

You can control the distance between the categories that cluster a data point from each series. To do this, use the `Gap` property of the series. It is the distance between categories expressed as a percentage of the bar width.

To set the distance between the bars of different series in the same category, use the `Spacing` property. It is the space between the series items in one series category as a proportion of the width of a single series item.

To create overlap, set negative values.

You can configure the values of `Gap` and `Spacing` for the whole chart in the first series and they are applied for all categories and series items.

### Customize Chart Elements - Nested Tags Settings

When configuring nested properties and child elements in your chart, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be `<Chart*Category**Specifics*>` where the Category can be one of the following:

* CategoryAxis
* ChartArea
* Legend
* PlotArea
* SeriesItems
* Title
* Tooltip
* ValueAxis
* XAxes
* YAxes
* and others

> 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.

An example of this is the rotation the Labels of a [categorical](https://www.telerik.com/blazor-ui/documentation/components/chart/data-bind#series-types) chart. You can use the

`ChartCategoryAxes` > `ChartCategoryAxis` > `ChartCategoryAxisLabels` > `ChartCategoryAxisLabelsRotation` tag

and set the `Angle` property to the desired value in degrees (they might be negative or positive numbers). By using similar approach you can take control over `ChartCategoryAxisLabelsMargin` (add margin for top, bottom, left and right), `ChartCategoryAxisLabelsPadding` (add padding for top, bottom, left and right) and others.

This approach is not limited only to the Labels - it can be used with all tags that are applicable for the chart type, for example the Chart Title `ChartTitle` > `ChartTitleMargin`.

## See Also

* [Live Demo: Range Bar Chart](https://demos.telerik.com/blazor-ui/chart/range-bar-chart)