# Range Selectors in FlexChart

Learn how to add a range selector to Wijmo's FlexChart in this documentation topic

## Content

Range selectors allow users to zoom in on selected parts of a chart by selecting a range on a secondary chart. The most popular implementation is the one in Google Finance charts.

![Range Selector](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-range-selectors.png)

The __RangeSelector__ class in the __wijmo.chart.interaction__ module makes it easy to add range selectors FlexChart:

1. Start with a regular FlexChart.
2. Add a second FlexChart below the main chart, remove both axes and set the height to a small value (say 60px).
3. Create a __RangeSelector__ object using the second chart as the constructor's parameter.
4. Listen to the __RangeSelector__'s _rangeChanged_ event to update the main chart's X-axis range.

```JavaScript
import * as chart from '@mescius/wijmo.chart';
import * as interaction from '@mescius/wijmo.chart.interaction';

// create the regular chart
var regularChart = new chart.FlexChart('#regularChart', {
    plotMargin: 'NaN 60 NaN 60' // top, right, bottom, left
});

// create the second chart for the range selector
var secondChart = new chart.FlexChart('#secondChart', {
    plotMargin: 'NaN 60 NaN 60' // top, right, bottom, left
});

// create RangeSelector
var rangeSelector = new interaction.RangeSelector(secondChart, {
    max: regularChart.itemsSource[0].date.valueOf(), // now
    min: regularChart.itemsSource[30].date.valueOf(), // a month ago
		minScale: .05, // restrict selection to between 5% and
		maxScale: .75, // 75% of the data
  	rangeChanged: function(s, e) {
    	regularChart.axisX.min = s.min;
      regularChart.axisX.max = s.max;
    }
});
```