# Range Zone

## Content

[RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) is a FlexChart series that renders a rectangular highlighted area over a specified data range. It can identify a region of interest in the plot, such as a target band, threshold zone, valid-operating range, or quadrant. [RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) derives from **Series** and is added to the chart's **Series** collection. It renders a rectangular fill instead of data-driven point geometry.
The following graph uses [RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) to highlight different ranges within the chart plot.
![Blazor FlexChart - RangeZone implementation to highligh different ranges withing the chart plot](https://cdn.mescius.io/document-site-files/images/8ba28e07-1633-4a6a-9114-13b9f1f04eed/image-20261014.6dd222.png?width=800)

## Define the Range

The [MinX](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MinX.html), [MaxX](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MaxX.html), [MinY](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MinY.html), and [MaxY](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MaxY.html) properties define the rectangular bounds of a [RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) in data coordinates.

| <span class="resizer-hover-zone">Property</span> | <span class="resizer-hover-zone">Type</span> | <span class="resizer-hover-zone">Default</span> | <span class="resizer-hover-zone">Description</span> |
| -------- | ---- | ------- | ----------- |
| [MinX](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MinX.html) | <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">double</span> | <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">NaN</span> | <span class="resizer-hover-zone">Defines the left bound in X data coordinates. </span><span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">NaN</span><span class="resizer-hover-zone"> extends the zone to the X-axis minimum.</span> |
| [MaxX](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MaxX.html) | <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">double</span> | <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">NaN</span> | <span class="resizer-hover-zone">Defines the right bound in X data coordinates. </span><span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">NaN</span><span class="resizer-hover-zone"> extends the zone to the X-axis maximum.</span> |
| [MinY](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MinY.html) | <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">double</span> | <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">NaN</span> | <span class="resizer-hover-zone">Defines the bottom bound in Y data coordinates. </span><span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">NaN</span><span class="resizer-hover-zone"> extends the zone to the Y-axis minimum.</span> |
| [MaxY](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MaxY.html) | <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">double</span> | <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">NaN</span> | <span class="resizer-hover-zone">Defines the top bound in Y data coordinates. </span><span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">NaN</span><span class="resizer-hover-zone"> extends the zone to the Y-axis maximum.</span> |

The following example creates a [RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) for **X values** from 2 to 5 and **Y values** from 10 to 20:

```auto
@using C1.Blazor.Chart

<FlexChart ItemsSource="Data" BindingX="X" Binding="Y">
    <SeriesCollection>
        <RangeZone MinX="2" MaxX="5" MinY="10" MaxY="20" />
        <Series Name="Data" />
    </SeriesCollection>
</FlexChart>
```

## Configure Unbounded Edges

A bound that is not specified uses its default value of [NaN](https://learn.microsoft.com/en-us/dotnet/api/system.double.nan?view=net-10.0) and extends to the corresponding axis extent.
Setting only [MinY](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MinY.html) and [MaxY](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MaxY.html) creates a horizontal band that spans the full plot width.

```auto
<RangeZone MinY="80" MaxY="100" />
```

Similarly, setting only [MinX](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MinX.html) and [MaxX](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.MaxX.html) creates a vertical band that spans the full plot height.

## Behaviors

The following behaviors define how [RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) interacts with the chart axes, series collection, appearance, and labels.
**Coordinate Space:**
[RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) bounds are expressed in data coordinates. FlexChart transforms the bounds to pixels using the same axis scales as other series. The range zone tracks the corresponding data range during pan, zoom, and axis-range changes.
**Rendering Order:**
[RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) renders according to its position in the `Series` collection. Add the [RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) before the data series to render the zone behind them. Add it after the data series to render the zone over them.
**Axis Association:**
[RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) uses the chart's primary X and Y axes unless the series supports explicit axis assignment.
**Appearance:**
[RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) inherits fill, stroke, and opacity settings from the base series style members.
**Data Labels and Legend:**
[RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) displays a data label at the top of the zone by default. `DataLabel.Position` defaults to `Top`. If `DataLabel.Content` is not set, the series name is used as the label text. By default, `Visibility` is set to `SeriesVisibility.Plot`, so [RangeZone](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.RangeZone.html) is not displayed in the legend.

## See Also

* **Range Zones** and **Quadrants** samples in [FlexChart Explorer](https://github.com/GrapeCity/ComponentOne-WPF-Samples).