## Range Selector

Range selector allows the user to choose the range of data to display on the FinancialChart.

In the example below, the FinancialChart control's min and max values change with the selection of range on range selector.

<wj-financial-chart style="border-bottom: 0 none; margin-bottom: 0px;" #stChart [itemsSource]="data" [header]="header" chartType="Candlestick" [symbolSize]="4" (rendered)="stRendered()" bindingX="date"> <wj-financial-chart-series name="Close" binding="high,low,open,close"></wj-financial-chart-series> </wj-financial-chart> <wj-financial-chart style="height:90px" #rsChart [itemsSource]="data" chartType="Line" (rendered)="rsRendered()" bindingX="date"> <wj-financial-chart-series binding="close"></wj-financial-chart-series> <wj-flex-chart-range-selector #rangeSelector [seamless]="true" (rangeChanged)="rangeChanged()"> </wj-flex-chart-range-selector> </wj-financial-chart>
import * as wjcChartFinance from 'wijmo/wijmo.chart.finance'; import * as wjcChartInteraction from 'wijmo/wijmo.chart.interaction'; import * as wjcCore from 'wijmo/wijmo'; import { Component, ViewChild, Inject} from '@angular/core'; import { DataSvc } from './../services/DataSvc'; //RangeSelector sample component @Component({ selector: 'range-selector-cmp', templateUrl: 'src/components/RangeSelectorCmp.html' }) export class RangeSelectorCmp { dataSvc: DataSvc; data: any[]; header: string; @ViewChild('stChart') stChart: wjcChartFinance.FinancialChart; @ViewChild('rsChart') rsChart: wjcChartFinance.FinancialChart; @ViewChild('rangeSelector') rangeSelector: wjcChartInteraction.RangeSelector; constructor( @Inject(DataSvc) dataSvc: DataSvc) { this.data = []; this.dataSvc = dataSvc; this.setDataSource(); this.header = 'Facebook, Inc. (FB)'; } stRendered() { var stChart = this.stChart; if (!stChart) { return; } stChart.axisX.labels = false; stChart.axisX.axisLine = false; stChart.legend.position = 0; stChart.plotMargin = '60 30 0 50'; stChart.tooltip.content = function (ht) { return 'Date: ' + ht.x + '<br />' + 'Open: ' + wjcCore.Globalize.format(ht.item.open, 'n2') + '<br />' + 'High: ' + wjcCore.Globalize.format(ht.item.high, 'n2') + '<br />' + 'Low: ' + wjcCore.Globalize.format(ht.item.low, 'n2') + '<br />' + 'Close: ' + wjcCore.Globalize.format(ht.item.close, 'n2') + '<br />' + 'Volume: ' + wjcCore.Globalize.format(ht.item.volume, 'n0'); }; } rsRendered() { var rsChart = this.rsChart; if (!rsChart) { return; } rsChart.axisY.labels = false; rsChart.axisY.majorGrid = false; rsChart.tooltip.content = ''; rsChart.plotMargin = '0 30 NaN 50'; } rangeChanged() { if (this.stChart && this.rangeSelector) { this.stChart.axisX.min = this.rangeSelector.min; this.stChart.axisX.max = this.rangeSelector.max; this.stChart.invalidate(); } } private setDataSource() { this.dataSvc.getData().subscribe(data => { this.data = data; }); } }

#### Result (live):