## Animation

The FinancialChart control can play animation with wijmo.chart.animation extension.

The example below shows how to play animation in FinancialChart control.

Click on chart to refresh and play animation.

HTML
<wj-financial-chart #chart [itemsSource]="data" [header]="header" [footer]="footer" [chartType]="chartType" [symbolSize]="4" bindingX="date"> <wj-financial-chart-series [binding]="bindingY"></wj-financial-chart-series> <wj-flex-chart-animation #animation [easing]="easing" [duration]="duration"></wj-flex-chart-animation> </wj-financial-chart> <dl class="dl-horizontal"> <dt>Type</dt> <dd> <wj-menu [(value)]="chartType" header="Chart Type" #typeMenu (itemClicked)="typeChanged(typeMenu)"> <wj-menu-item value="Area">Area</wj-menu-item> <wj-menu-item value="Line">Line</wj-menu-item> <wj-menu-item value="Column">Column</wj-menu-item> <wj-menu-item value="Candlestick">Candlestick</wj-menu-item> <wj-menu-item value="HighLowOpenClose">HighLowOpenClose</wj-menu-item> </wj-menu> </dd> <dt>Easing</dt> <dd> <wj-menu [(value)]="easing" header="Easing" #easingMenu (itemClicked)="easingChanged(easingMenu)"> <wj-menu-item value="Linear">Linear</wj-menu-item> <wj-menu-item value="Swing">Swing</wj-menu-item> <wj-menu-item value="EaseInQuad">EaseInQuad</wj-menu-item> <wj-menu-item value="EaseInCubic">EaseInCubic</wj-menu-item> <wj-menu-item value="EaseInQuart">EaseInQuart</wj-menu-item> <wj-menu-item value="EaseInQuint">EaseInQuint</wj-menu-item> <wj-menu-item value="EaseInSine">EaseInSine</wj-menu-item> <wj-menu-item value="EaseInExpo">EaseInExpo</wj-menu-item> <wj-menu-item value="EaseInCirc">EaseInCirc</wj-menu-item> <wj-menu-item value="EaseInBack">EaseInBack</wj-menu-item> <wj-menu-item value="EaseInBounce">EaseInBounce</wj-menu-item> <wj-menu-item value="EaseInElastic">EaseInElastic</wj-menu-item> </wj-menu> </dd> <dt>Duration</dt> <dd> <wj-input-number [value]="400" #ipt [min]="200" [max]="5000" [step]="200" format="n0" (valueChanged)="durationChanged(ipt)"></wj-input-number> </dd> </dl>
TS
import * as wjcChartFinance from 'wijmo/wijmo.chart.finance'; import * as wjcChartAnimation from 'wijmo/wijmo.chart.animation'; import * as wjcCore from 'wijmo/wijmo'; import * as wjcInput from 'wijmo/wijmo.input'; import { Component, ViewChild, Inject} from '@angular/core'; import { DataSvc } from './../services/DataSvc'; //Animation sample component @Component({ selector: 'animation-cmp', templateUrl: 'src/components/AnimationCmp.html' }) export class AnimationCmp { dataSvc: DataSvc; data: any[]; header: string; footer: string; chartType: string; easing: string; duration: number; bindingY: string; bindingYs: any; @ViewChild('chart') chart: wjcChartFinance.FinancialChart; @ViewChild('animation') animation: wjcChartAnimation.ChartAnimation; constructor( @Inject(DataSvc) dataSvc: DataSvc) { this.data = []; this.dataSvc = dataSvc; this.setDataSource(); this.header = 'Facebook, Inc. (FB)'; this.footer = 'Click on chart to refresh'; this.chartType = 'Line'; this.easing = 'Swing'; this.duration = 400; this.bindingY = 'close'; this.bindingYs = { Column: 'close', Line: 'close', Area: 'close', Candlestick: 'high,low,open,close', HighLowOpenClose: 'high,low,open,close' }; } private setDataSource() { this.dataSvc.getData().subscribe(data => { this.data = data; }); } ngAfterViewInit() { this.chart.tooltip.content = ht => { var dateStr = 'Date: ' + ht.x + '<br />', hlocStr = '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 />', closeStr = 'Close: ' + wjcCore.Globalize.format(ht.item.close, 'n2'), volStr = 'Volume: ' + wjcCore.Globalize.format(ht.item.volume, 'n0'), toolTipStr; switch (this.chartType) { case 'Line': case 'Column': toolTipStr = dateStr + closeStr; break; default: toolTipStr = dateStr + hlocStr; break; } return toolTipStr; }; this.chart.hostElement.addEventListener('click', () => { this._refreshChart(); }); } typeChanged(menu) { var chartType = menu.selectedValue; this.bindingY = this.bindingYs[chartType]; } easingChanged(menu) { this.animation.easing = menu.selectedValue; this._refreshChart(); } durationChanged(input) { this.animation.duration = input.value; this._refreshChart(); } _refreshChart() { if (this.chart) { this.chart.refresh(true); } } }

#### Result (live):

Type
  Area Line Column Candlestick HighLowOpenClose
Easing
  Linear Swing EaseInQuad EaseInCubic EaseInQuart EaseInQuint EaseInSine EaseInExpo EaseInCirc EaseInBack EaseInBounce EaseInElastic
Duration