# Integration with RadChartView

**RadChartView** has full **RadRangeSelector** integration support, through implementation of the **IRangeSelectorControl** and **IRangeSelectorElement** interfaces by **RadChartView** and **RangeSelectorViewElement** classes respectively.

> note  **RangeSelectorViewElement** supports only Cartesian series.

**RangeSelectorViewElement** extends the **RadChartElement**, draws the chart into **RadRangeSelector** and generates the scales according to its Axes collection. By accessing the **RangeSelectorViewElement** you can take advantage of some additional controlling mechanisms like **SeriesInitializing**,  **SeriesInitialized** and **LabelInitializng** events. With the first two events you can control the series that should draw into RadRangeSelector and their types, while with the **LabelInitializng** event, you can control the labels that are going to be drawn on the scales.

## Scale Customization

Here is how to access the **RangeSelectorViewElement** and change the series types:

#### SeriesInitializing Event

```C#
RangeSelectorViewElement chartElement = this.radRangeSelector1.RangeSelectorElement.AssociatedElement as RangeSelectorViewElement;
chartElement.SeriesInitializing += new SeriesInitializingEventHandler(chartElement_SeriesInitializing);
```

```VB.NET
Dim chartElement As RangeSelectorViewElement = TryCast(Me.radRangeSelector1.RangeSelectorElement.AssociatedElement, RangeSelectorViewElement)
AddHandler chartElement.SeriesInitializing, AddressOf chartElement_SeriesInitializing
```

#### Change Series Type

```C#
void chartElement_SeriesInitializing(object sender, SeriesInitializingEventArgs e)
{
    e.SeriesType = typeof(BarSeries);
}
```

```VB.NET
        Private Sub chartElement_SeriesInitializing(sender As Object, e As SeriesInitializingEventArgs)
            e.SeriesType = GetType(BarSeries)
        End Sub
```

> caption Figure 1: BarSeries

![WinForms RadRangeSelector BarSeries](https://www.telerik.com/products/winforms/documentation/assets/d8bdc358ee8937119450e31e8359c0b4/rangeselector-integration-with-chartview001.png)

As you can see, the chart displays a **LineSeries**, while in **RadRangeSelector** we have changed it to **BarSeries**.

## Labels Customization

Here is how to access and modify the labels in RadRangeSelector

#### LabelInitializing Event

```C#
RangeSelectorViewElement chartElement = this.radRangeSelector1.RangeSelectorElement.AssociatedElement as RangeSelectorViewElement;
chartElement.LabelInitializing += new LabelInitializingEventHandler(chartElement_LabelInitializing);
```

```VB.NET
Dim chartElement As RangeSelectorViewElement = TryCast(Me.radRangeSelector1.RangeSelectorElement.AssociatedElement, RangeSelectorViewElement)
AddHandler chartElement.LabelInitializing, AddressOf chartElement_LabelInitializing
```

#### Change Labels

```C#
Font f = new Font("Arial", 22);
void chartElement_LabelInitializing(object sender, LabelInitializingEventArgs e)
{
    e.LabelElement.Font = f;

    if (e.LabelElement.Text == "C")
    {
        e.LabelElement.ForeColor = Color.Blue;
    }
    if (e.LabelElement.Text == "A")
    {
        e.LabelElement.ForeColor = Color.Red;
    }
}
```

```VB.NET
        Private f As New Font("Arial", 22)
        Private Sub chartElement_LabelInitializing(sender As Object, e As LabelInitializingEventArgs)
            e.LabelElement.Font = f

            If e.LabelElement.Text = "C" Then
                e.LabelElement.ForeColor = Color.Blue
            End If
            If e.LabelElement.Text = "A" Then
                e.LabelElement.ForeColor = Color.Red
            End If
        End Sub
```

> caption Figure 2: Changed Chart Labels

![WinForms RadRangeSelector Changed Chart Labels](https://www.telerik.com/products/winforms/documentation/assets/1f4e1f4201223266dc6b1e9ebac08813/rangeselector-integration-with-chartview002.png)

Also, the generated from **RangeSelectorViewElement** scales (**RangeSelectorChartScaleContainerElement**) have embedded logic that prevents overlapping of labels and the following properties can be used to control it:

* **ShowAllLabels:** By default the control will hide the overlapping labels. If you want to show all labels, just set this property back to true.

* **LabelsOffset:** This property defines the minimum space (in pixels) between the labels when ShowAllLabels is false. Default value of this property is 5 pixels.

The easiest way to access these properties is in the **ScaleInitializing** event of **RandRangeSelector**.

#### ScaleInitializing Event

```C#
this.radRangeSelector1.ScaleInitializing += new ScaleInitializingEventHandler(radRangeSelector1_ScaleInitializing);
```

```VB.NET
AddHandler Me.radRangeSelector1.ScaleInitializing, AddressOf radRangeSelector1_ScaleInitializing
```

#### Label Settings

```C#
void radRangeSelector1_ScaleInitializing(object sender, ScaleInitializingEventArgs e)
{
    RangeSelectorChartScaleContainerElement chartScaleElement = e.ScaleElement as RangeSelectorChartScaleContainerElement;
    chartScaleElement.LabelsOffset = 0;
    chartScaleElement.ShowAllLabels = false;
}
```

```VB.NET
        Private Sub radRangeSelector1_ScaleInitializing(sender As Object, e As ScaleInitializingEventArgs)
            Dim chartScaleElement As RangeSelectorChartScaleContainerElement = TryCast(e.ScaleElement, RangeSelectorChartScaleContainerElement)
            chartScaleElement.LabelsOffset = 0
            chartScaleElement.ShowAllLabels = False
        End Sub
```

## Pan and Zoom Synchronization

There is two-way synchronization between the pan and zoom functionality of RadChartView and the selected range of RadRangeSelector. By setting **EnablePanAndZoomSynchronization** property to false this synchronization will be only one way - from RadRangeSelector to RadChartView.

#### Disable Pan and Zoom Synchronization

```C#
((RangeSelectorViewElement)this.radRangeSelector1.RangeSelectorElement.AssociatedElement).EnablePanAndZoomSynchronization = false;
```

```VB.NET
DirectCast(Me.radRangeSelector1.RangeSelectorElement.AssociatedElement, RangeSelectorViewElement).EnablePanAndZoomSynchronization = False
```

## See Also

* [How to Snap RangeSelector to Date-Time Intervals in RadChartView](https://www.telerik.com/products/winforms/documentation/knowledge-base/rangeselector-snap-to-datetime-intervals-chartview)
* [Design Time](https://www.telerik.com/products/winforms/documentation/controls/rangeselector/design-time)
* [Structure](https://www.telerik.com/products/winforms/documentation/controls/rangeselector/structure)
* [Getting Started](https://www.telerik.com/products/winforms/documentation/controls/rangeselector/getting-started)
* [Properties and Events](https://www.telerik.com/products/winforms/documentation/controls/rangeselector/properties-and-events)