Steps for getting started with the FinancialChart in AngularJS applications:
var app = angular.module('app', ['wj']);
The FinancialChart control supports various chart types to allow customization.
The example below shows what happens when you change the chartType.
The marker on FinancialChart consists of a text area with content reflecting data point values, and an optional vertical or horizontal line (or both for a cross-hair effect) positioned over the plot area.
In the example below, the vertical and horizontal lines, both get displayed when mouse is hovered over the plot area. The data values corresponding to the marker position are displayed next to x and y axes.
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.
Trend lines are used to represent trends in data and to examine the problems of prediction.
The following example indicates moving average trend based on the past prices. User can change the period and type of the moving average line.
Annotations are used to mark important news or events that can be attached to a specific data point on FinancialChart. Users can hover over the event to display the full annotation text.
There are Circle, Ellipse, Image, Line, Polygon, Rectangle, Square and Text annotations that can be used to mark an event.
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.