# FinancialChart 101

This page shows how to get started with Wijmo's FinancialChart control.

## Getting Started

Steps for getting started with the FinancialChart control in JavaScript applications:

1. Add references to Wijmo.
2. Add markup to serve as the Wijmo control's host.
3. Initialize the Wijmo control(s) via JavaScript.
4. Add some CSS to customize the input control's appearance (Optional).

HTML
<div id="introChart"></div>
JS
var introChart = new wijmo.chart.finance.FinancialChart('#introChart', { header: 'Facebook, Inc. (FB)', itemsSource: app.chartData, bindingX: 'date', series: [ { name: 'Open', binding: 'open' }, { name: 'Close', binding: 'close' } ] });
CSS
.wj-flexchart { height: 400px; background-color: white; box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75); padding: 8px; margin-bottom: 12px; }

#### Result (live):

## Chart Types

The FinancialChart control supports various chart types.

The example below shows the effect of the control's chartType property:

HTML
<div id="ctChart"></div> <select id="ctMenu"> <option value="4">Area</option> <option selected value="2">Line</option> <option value="0">Column</option> <option value="5">Candlestick</option> <option value="6">HighLowOpenClose</option> <option value="7">HeikinAshi</option> <option value="8">LineBreak</option> <option value="9">Renko</option> <option value="10">Kagi</option> <option value="11">ColumnVolume</option> <option value="12">EquiVolume</option> <option value="13">CandleVolume</option> <option value="14">ArmsCandleVolume</option> </select>
JS
var ctChart = new wijmo.chart.finance.FinancialChart('#ctChart', { header: 'Facebook, Inc. (FB)', itemsSource: app.chartData, bindingX: 'date', series: [ { binding: 'close' } ], symbolSize: 4, tooltip: { content: function (ht) { var dateStr = 'Date: ' + ht.x + '<br/>', hlocStr = 'Open: ' + format(ht.item.open, 'n2') + '<br/>' + 'High: ' + format(ht.item.high, 'n2') + '<br/>' + 'Low: ' + format(ht.item.low, 'n2') + '<br/>' + 'Close: ' + format(ht.item.close, 'n2') + '<br/>', closeStr = 'Close: ' + format(ht.item.close, 'n2'), volStr = 'Volume: ' + format(ht.item.volume, 'n0'), toolTipStr; switch (ctMenu.value) { case ChartType.Line: case ChartType.Column: toolTipStr = dateStr + closeStr; break; case ChartType.ColumnVolume: toolTipStr = dateStr + closeStr + '<br/>' + volStr; break; case ChartType.EquiVolume: case ChartType.CandleVolume: case ChartType.ArmsCandleVolume: toolTipStr = dateStr + hlocStr + volStr; break; default: toolTipStr = dateStr + hlocStr; break; } return toolTipStr; } } }); // create menu var ctMenu = new wijmo.input.Menu('#ctMenu', { itemClicked: function (s, e) { var ct = wijmo.changeType(s.selectedValue, wijmo.DataType.Number); if (wijmo.isNumber(ct)) { // set chart type ctChart.chartType = ct; // set binding var binding = 'high,low,open,close'; // default switch (ct) { case ChartType.Area: case ChartType.Line: case ChartType.Column: binding = 'close'; break; case ChartType.ColumnVolume: binding = 'close,volume'; break; case ChartType.EquiVolume: case ChartType.CandleVolume: case ChartType.ArmsCandleVolume: binding = 'high,low,open,close,volume'; break; } ctChart.series[0].binding = binding; // set options switch (ct) { case ChartType.LineBreak: ctChart.options = { lineBreak: { newLineBreaks: 3 } }; break; case ChartType.Renko: ctChart.options = { renko: { boxSize: 2, rangeMode: 'Fixed', fields: 'Close' } }; break; case ChartType.Kagi: ctChart.options = { kagi: { reversalAmount: 1, rangeMode: 'Fixed', fields: 'Close' } }; break; } } updateMenuHeader(s, 'Chart Type'); } }); updateMenuHeader(ctMenu, 'Chart Type');

#### Result (live):

## Marker

The marker on the 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 get displayed when the mouse hovers over the plot area. The data values corresponding to the marker position are displayed next to the x and y axes:

HTML
<div id="mkChart"></div>
JS
var mkChart = new wijmo.chart.finance.FinancialChart('#mkChart', { chartType: 'Candlestick', itemsSource: app.chartData, bindingX: 'date', series: [ { binding: 'high,low,open,close' } ], tooltip: { content: '' }, axisY: { position: wijmo.chart.Position.Right }, header: 'Facebook, Inc. (FB)', symbolSize: 4, rendered: function (s, e) { var plotArea = s.hostElement.querySelector('.wj-plot-area'); plotAreaRect = wijmo.getElementRect(plotArea); } }); // create markers var markerPos = new wijmo.Point(), markerContent, plotAreaRect; var midMarker = new wijmo.chart.LineMarker(mkChart, { lines: 'Both', interaction: 'Move', alignment: wijmo.chart.LineMarkerAlignment.Top | wijmo.chart.LineMarkerAlignment.Left, content: function () { markerContent = getMarkerContent(new wijmo.Point(markerPos.x, markerPos.y)); return markerContent ? markerContent.content : ''; }, positionChanged: function (s, e) { markerPos = e; } }); var hMarker = new wijmo.chart.LineMarker(mkChart, { lines: 'None', interaction: 'Move', horizontalPosition: 1, content: function () { return markerContent && markerContent.y ? markerContent.y.toString() : ''; } }); var vMarker = new wijmo.chart.LineMarker(mkChart, { lines: 'None', interaction: 'Move', verticalPosition: 1, content: function () { return markerContent && markerContent.x ? markerContent.x.toString() : ''; } }); // hide/show markers var host = mkChart.hostElement; host.addEventListener('mouseenter', function (e) { showMarkers(true); }); host.addEventListener('mouseleave', function (e) { showMarkers(false); }); host.addEventListener('touchstart', function (e) { showMarkers(true); }); host.addEventListener('touchend', function (e) { showMarkers(false); }); showMarkers(false); // show/hide markers function showMarkers(show) { var host = mkChart.hostElement, lineMarkers = host.querySelectorAll('.wj-chart-linemarker-container'); for (var i = 0; i < lineMarkers.length; i++) { lineMarkers[i].style.visibility = show ? 'visible' : 'hidden'; } } // get the marker content function getMarkerContent(pt) { var retVal = { content: '', x: '', y: '' }; // calculate the y value if (!plotAreaRect) { retVal.y = 0; } else { var axisYMax = mkChart.axisY.actualMax, axisYMin = mkChart.axisY.actualMin; retVal.y = axisYMax - ((pt.y - plotAreaRect.top) / plotAreaRect.height) * (axisYMax - axisYMin); retVal.y = retVal.y.toFixed(2); } // calculate the x value var ptMarker = new wijmo.Point(pt.x, NaN), ht = mkChart.series[0].hitTest(ptMarker); if (ht.x && ht.y !== null) { retVal.x = ht.x; } // all done return retVal; }

#### Result (live):

## Range Selector

Range selectors allow the user to choose a data range to display on the FinancialChart.

In the example below, the FinancialChart control's min and max values change to match the range selector:

HTML
<div id="stChart" style="border-bottom: 0 none; margin-bottom: 0px;"></div> <div id="rsChart" style="height:90px"></div>
JS
var stChart = new wijmo.chart.finance.FinancialChart('#stChart', { chartType: 'Candlestick', itemsSource: app.chartData, series: [ { binding: 'high,low,open,close' } ], header: 'Facebook, Inc. (FB)', symbolSize: 4, bindingX: 'date', axisX: { labels: false, axisLine: false }, legend: { position: wijmo.chart.Position.None }, plotMargin: '60 30 0 50', tooltip: { content: function (ht) { return 'Date: ' + ht.x + '<br/>' + 'Open: ' + format(ht.item.open, 'n2') + '<br/>' + 'High: ' + format(ht.item.high, 'n2') + '<br/>' + 'Low: ' + format(ht.item.low, 'n2') + '<br/>' + 'Close: ' + format(ht.item.close, 'n2'); } } }); // create extra/smaller chart with range selector var rsChart = new wijmo.chart.finance.FinancialChart('#rsChart', { chartType: 'Line', itemsSource: app.chartData, bindingX: 'date', series: [ { binding: 'close' } ], axisY: { labels: false, majorGrid: false }, tooltip: { content: '' }, plotMargin: '0 30 NaN 50' }); var rangeSelector = new wijmo.chart.interaction.RangeSelector(rsChart, { seamless: true, // allow reversing min/max by dragging rangeChanged: function (s, e) { stChart.axisX.min = s.min; stChart.axisX.max = s.max; stChart.invalidate(); } });

#### Result (live):

## Trend Lines

Trend lines are used to reveal trends in data and to examine prediction issues.

The following example displays moving average trends based on past prices. Users can change the period and type of the moving average line.

1. period: the calculation period of the moving average line.
2. type: the calculation type of the moving average line. This includes Simple, Weighted, Exponential and Triangular types.

HTML
<div id="tlChart"></div> <dl class="dl-horizontal"> <dt>Period</dt> <dd> <input id="period" type="text" /> </dd> <dt>Type</dt> <dd> <select id="maMenu"> <option selected value="0">Simple</option> <option value="1">Weighted</option> <option value="2">Exponential</option> <option value="3">Triangular</option> </select> </dd> </dl>
JS
var tlChart = new wijmo.chart.finance.FinancialChart('#tlChart', { header: 'Facebook, Inc. (FB)', itemsSource: app.chartData, bindingX: 'date', chartType: 'Line', axisY: { position: 'Right' }, legend: { position: 'Top' }, series: [{ name: 'Close', binding: 'close' }] }); // add moving average trend line var movingAverage = new wijmo.chart.analytics.MovingAverage({ name: wijmo.chart.analytics.MovingAverageType[0] + ' Moving Average', type: wijmo.chart.analytics.MovingAverageType.Simple, itemsSource: app.chartData, binding: 'close', period: 2, style: { strokeWidth: 4 } }); tlChart.series.push(movingAverage); // allow user to change the moving average period var period = new wijmo.input.InputNumber('#period', { step: 1, format: 'n0', value: 2, min: 2, max: 10, // data loaded asynchronously valueChanged: function (s, e) { s.max = app.chartData.length - 1; // data loaded asynchronously if (s.value >= s.min && s.value <= s.max) { movingAverage.period = s.value; } } }); // select moving average type var maMenu = new wijmo.input.Menu('#maMenu', { itemClicked: function (s, e) { var arg = wijmo.changeType(s.selectedValue, wijmo.DataType.Number); if (wijmo.isNumber(arg)) { movingAverage.type = arg; } movingAverage.name = s.text + ' Moving Average'; updateMenuHeader(s, 'Period'); } }); updateMenuHeader(maMenu, 'Period');

#### Result (live):

Period
Type

## Event Annotations

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.

Events can be marked with the following types of annotation: Circle, Ellipse, Image, Line, Polygon, Rectangle, Square and Text.

HTML
<div id="anChart"></div>
JS
var anChart = new wijmo.chart.finance.FinancialChart('#anChart', { header: 'Facebook, Inc. (FB)', itemsSource: app.chartData, bindingX: 'date', chartType: 'Line', series: [ { name: 'Close', binding: 'close' } ] }); // add annotation layer var al = new wijmo.chart.annotation.AnnotationLayer(anChart); // add rectangle annotation al.items.push(new wijmo.chart.annotation.Rectangle({ width: 40, height: 30, pointIndex: 16,//1/28/15 tooltip: 'FACEBOOK INC Files SEC form 8-K, Results of Operations and Financial Condition', offset: { x: 0, y: -15 }, seriesIndex: 0, position: 'Center', attachment: 'DataIndex', style: { 'fill': '#cccccc', 'stroke': '#888888', 'fill-opacity': 1, 'stroke-width': 1, 'stroke-opacity': 1 }, content: 'R' })); // add ellipse annotation al.items.push(new wijmo.chart.annotation.Ellipse({ width: 40, height: 30, pointIndex: 17, //01/29/15 offset: { x: 0, y: -15 }, seriesIndex: 0, position: 'Center', attachment: 'DataIndex', style: { 'fill': '#cccccc', 'stroke': '#888888', 'fill-opacity': 1, 'stroke-width': 1, 'stroke-opacity': 1 }, content: 'E', tooltip: 'FACEBOOK INC Files SEC form 10-K, Annual Report' })); // add circle annotation al.items.push(new wijmo.chart.annotation.Circle({ radius: 20, pointIndex: 49, //03/17/15 tooltip: 'Coverage initiated on Facebook by Brean Capital', offset: { x: 0, y: -15 }, seriesIndex: 0, style: { 'fill': '#cccccc', 'stroke': '#888888', 'fill-opacity': 1, 'stroke-width': 1, 'stroke-opacity': 1 }, position: 'Center', attachment: 'DataIndex', content: 'C' })); // add square annotation al.items.push(new wijmo.chart.annotation.Square({ length: 30, pointIndex: 75, //04/22/15 tooltip: 'FACEBOOK INC Files SEC form 8-K, Results of Operations and Financial Condition', offset: { x: 0, y: -15 }, seriesIndex: 0, style: { 'fill': '#cccccc', 'stroke': '#888888', 'fill-opacity': 1, 'stroke-width': 1, 'stroke-opacity': 1 }, position: 'Center', attachment: 'DataIndex', content: 'S' }));

#### Result (live):

## Animation

The FinancialChart control can use animations defined by wijmo.chart.animation extension.

The example below shows how to add animations to a FinancialChart control.

Click anywhere on the chart to refresh and animate.

HTML
<div id="animChart"></div> <dl class="dl-horizontal"> <dt>Chart Type</dt> <dd> <select id="animChartType"> <option value="4">Area</option> <option selected value="2">Line</option> <option value="0">Column</option> <option value="5">Candlestick</option> <option value="6">HighLowOpenClose</option> </select> </dd> <dt>Easing</dt> <dd> <select id="animEasing"> <option selected value="Linear">Linear</option> <option value="Swing">Swing</option> <option value="EaseInQuad">EaseInQuad</option> <option value="EaseInCubic">EaseInCubic</option> <option value="EaseInQuart">EaseInQuart</option> <option value="EaseInQuint">EaseInQuint</option> <option value="EaseInSine">EaseInSine</option> <option value="EaseInExpo">EaseInExpo</option> <option value="EaseInCirc">EaseInCirc</option> <option value="EaseInBack">EaseInBack</option> <option value="EaseInBounce">EaseInBounce</option> <option value="EaseInElastic">EaseInElastic</option> </select> </dd> <dt>Duration</dt> <dd> <input id="animDuration" /> </dd> </dl>
JS
var animChart = new wijmo.chart.finance.FinancialChart('#animChart', { header: 'Facebook, Inc. (FB)', itemsSource: app.chartData, bindingX: 'date', series: [ { binding: 'close' } ], symbolSize: 4, footer: 'Click on chart to refresh', tooltip: { content: function (ht) { var dateStr = 'Date: ' + ht.x + '<br/>', hlocStr = 'Open: ' + format(ht.item.open, 'n2') + '<br/>' + 'High: ' + format(ht.item.high, 'n2') + '<br/>' + 'Low: ' + format(ht.item.low, 'n2') + '<br/>' + 'Close: ' + format(ht.item.close, 'n2') + '<br/>', closeStr = 'Close: ' + format(ht.item.close, 'n2'), toolTipStr; switch (ht.chart.chartType) { case ChartType.Line: case ChartType.Column: toolTipStr = dateStr + closeStr; break; default: toolTipStr = dateStr + hlocStr; break; } return toolTipStr; } } }); // refresh chart on clicks to show animation animChart.hostElement.addEventListener('click', function () { animChart.refresh(true); }); // create ChartAnimation var animation = new wijmo.chart.animation.ChartAnimation(animChart, { easing: 'Linear' }); // change chartType var animChartType = new wijmo.input.Menu('#animChartType', { itemClicked: function (s, e) { var arg = wijmo.changeType(s.selectedValue, wijmo.DataType.Number), binding = 'high,low,open,close'; if (wijmo.isNumber(arg)) { animChart.chartType = arg; switch (arg) { case ChartType.Area: case ChartType.Line: case ChartType.Column: binding = 'close'; break; case ChartType.ColumnVolume: binding = 'close,volume'; break; case ChartType.EquiVolume: case ChartType.CandleVolume: case ChartType.ArmsCandleVolume: binding = 'high,low,open,close,volume'; break; } animChart.series[0].binding = binding; } updateMenuHeader(s, 'Chart Type'); } }); updateMenuHeader(animChartType, 'Chart Type'); // change animation easing var animEasing = new wijmo.input.Menu('#animEasing', { itemClicked: function (s) { var arg = s.selectedValue; if (arg) { animation.easing = wijmo.chart.animation.Easing[arg]; animChart.refresh(true); } updateMenuHeader(s, 'Easing'); } }); updateMenuHeader(animEasing, 'Easing'); // change animation duration var animDuration = new wijmo.input.InputNumber('#animDuration', { step: 200, format: 'n0', value: 400, min: 200, max: 5000, valueChanged: function (s, e) { animation.duration = s.value; animChart.refresh(true); } });

#### Result (live):

Chart Type
Easing
Duration