How can I help you?
Technical indicators in Vue Chart component
3 Feb 202624 minutes to read
A technical indicator is a mathematical calculation based on historical price, volume, or open‑interest information that aims to forecast financial market direction.
Chart supports 10 types of technical indicators.
Accumulation Distribution
Accumulation Distribution combines price and volume to show how money may be flowing into or out of a stock. To render an Accumulation Distribution indicator, use indicator type as AccumulationDistribution and inject AccumulationDistributionIndicator into services. To calculate the signal line, the volume field must be included in the dataSource.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:tooltip='tooltip' :chartArea='chartArea' :crosshair='crosshair' :indicators='indicators'
:legendSettings='legendSettings' :zoomSettings='zoomSettings' :rows='rows' :axes='axes'
:axisLabelRender='axisLabelRender'>
<e-series-collection>
<e-series :dataSource='seriesData1' :animation='animation' type='Candle' xName='x' yName='y' name='Apple Inc'
width=2 low='low' high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71'
bullFillColor='#e74c3d'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, AccumulationDistributionIndicator, StripLine } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1= series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}',
minimum: 50, maximum: 170,
plotOffset: 25,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
};
const axes = [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -7000000000, maximum: 5000000000,
interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution',
stripLines: [
{
start: -7000000000, end: 6000000000, text: '', color: '#6063ff', visible: true,
opacity: 0.1, zIndex: 'Behind'
}]
}];
const rows = [
{
height: '40%'
}, {
height: '60%'
}
];
const animation = { enable: true };
const indicators = [{
type: 'AccumulationDistribution', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
period: 3, animation: { enable: true }
}];
const zoomSettings =
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = {
visible: false
};
const crosshair = { enable: true, lineType: 'Vertical' };
const chartArea = { border: { width: 0 } };
const tooltip = {
enable: true,
shared: true
};
const title = "AAPL 2012-2017";
provide('chart', [CandleSeries, Category, LineSeries, Tooltip, DateTime, StripLine, Zoom, Logarithmic, Crosshair, AccumulationDistributionIndicator]);
const axisLabelRender = (args) => {
if (args.axis.name === 'secondary') {
let value = Number(args.text) / 1000000000;
args.text = String(value) + 'bn';
}
};
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:tooltip='tooltip' :chartArea='chartArea' :crosshair='crosshair' :indicators='indicators'
:legendSettings='legendSettings' :zoomSettings='zoomSettings' :rows='rows' :axes='axes'
:axisLabelRender='axisLabelRender'>
<e-series-collection>
<e-series :dataSource='seriesData1' :animation='animation' type='Candle' xName='x' yName='y' name='Apple Inc'
width=2 low='low' high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71'
bullFillColor='#e74c3d'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, AccumulationDistributionIndicator, StripLine } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}',
minimum: 50, maximum: 170,
plotOffset: 25,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
},
axes: [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -7000000000, maximum: 5000000000,
interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution',
stripLines: [
{
start: -7000000000, end: 6000000000, text: '', color: '#6063ff', visible: true,
opacity: 0.1, zIndex: 'Behind'
}]
}],
rows: [
{
height: '40%'
}, {
height: '60%'
}
],
animation: { enable: true },
indicators: [{
type: 'AccumulationDistribution', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
period: 3, animation: { enable: true }
}],
zoomSettings:
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: {
visible: false
},
crosshair: { enable: true, lineType: 'Vertical' },
chartArea: { border: { width: 0 } },
tooltip: {
enable: true,
shared: true
},
title: "AAPL 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, LineSeries, Tooltip, DateTime, StripLine, Zoom, Logarithmic, Crosshair, AccumulationDistributionIndicator]
},
methods: {
axisLabelRender: function (args) {
if (args.axis.name === 'secondary') {
let value = Number(args.text) / 1000000000;
args.text = String(value) + 'bn';
}
}
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Average True Range (ATR)
ATR measures stock volatility by comparing the current value with the previous value. To render an Average True Range (ATR) indicator, use indicator type as Atr and inject AtrIndicator into provide.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, AtrIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}',
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1,
plotOffset: 25,
majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 }
};
const axes = [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, majorTickLines: { width: 0 },
maximum: 14, minimum: 0, interval: 7, title: 'ATR',
stripLines: [
{
start: 0, end: 14, text: '', color: '#6063ff', visible: true,
opacity: 0.1, zIndex: 'Behind'
}]
}];
const rows = [
{
height: '40%'
}, {
height: '60%'
}
];
const indicators = [{
type: 'Atr', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
period: 3, animation: { enable: true }
}];
const tooltip = {
enable: true, shared: true
};
const animation = { enable: true };
const crosshair = { enable: true, lineType: 'Vertical' };
const chartArea = { border: { width: 0 } };
const zoomSettings =
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = { visible: false };
const title = "AAPL 2012-2017";
provide('chart', [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, AtrIndicator, StripLine]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, AtrIndicator } from "@syncfusion/ej2-vue-charts";
const candlestickSeriesData = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: candlestickSeriesData,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}',
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1,
plotOffset: 25,
majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 }
},
axes: [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, majorTickLines: { width: 0 },
maximum: 14, minimum: 0, interval: 7, title: 'ATR',
stripLines: [
{
start: 0, end: 14, text: '', color: '#6063ff', visible: true,
opacity: 0.1, zIndex: 'Behind'
}]
}],
rows: [
{
height: '40%'
}, {
height: '60%'
}
],
indicators: [{
type: 'Atr', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
period: 3, animation: { enable: true }
}],
tooltip: {
enable: true, shared: true
},
animation: { enable: true },
crosshair: { enable: true, lineType: 'Vertical' },
chartArea: { border: { width: 0 } },
zoomSettings:
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: { visible: false },
title: "AAPL 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, AtrIndicator, StripLine]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Bollinger Band
A chart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. To render a Bollinger Band, use indicator type as BollingerBand and inject BollingerBands into the provide. Bollinger band will be represented by three lines (upperLine, lowerLine, signalLine).Bollinger Band default values of the period is 14 and standardDeviations is 2.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:tooltip='tooltip' :chartArea='chartArea' :crosshair='crosshair' :indicators='indicators'
:legendSettings='legendSettings' :zoomSettings='zoomSettings'>
<e-series-collection>
<e-series :dataSource='seriesData1' width=2 xName='x' yName='y' low='low' high='high' close='close' open='open'
volume='volume' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, BollingerBands, RangeAreaSeries } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
};
const chartArea = {
border: {
width: 0
}
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}M',
minimum: 50, maximum: 170, interval: 30,
majorGridLines: { width: 1 },
lineStyle: { width: 0 }
};
const indicators = [{
type: 'BollingerBands', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',
period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 }, lowerLine: { color: '#f2ec2f', width: 1 }
}];
const animation = { enable: true };
const zoomSettings = {
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = {
visible: false
};
const crosshair = { enable: true, lineType: 'Vertical' };
const tooltip = {
enable: true, shared: true
};
const title = "AAPL - 2012-2017";
provide('chart', [CandleSeries, Category, LineSeries, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, RangeAreaSeries, BollingerBands]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:tooltip='tooltip' :chartArea='chartArea' :crosshair='crosshair' :indicators='indicators'
:legendSettings='legendSettings' :zoomSettings='zoomSettings'>
<e-series-collection>
<e-series :dataSource='seriesData1' width=2 xName='x' yName='y' low='low' high='high' close='close' open='open'
volume='volume' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, BollingerBands, RangeAreaSeries } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
},
chartArea: {
border: {
width: 0
}
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}M',
minimum: 50, maximum: 170, interval: 30,
majorGridLines: { width: 1 },
lineStyle: { width: 0 }
},
indicators: [{
type: 'BollingerBands', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',
period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 }, lowerLine: { color: '#f2ec2f', width: 1 }
}],
animation: { enable: true },
zoomSettings: {
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: {
visible: false
},
crosshair: { enable: true, lineType: 'Vertical' },
tooltip: {
enable: true, shared: true
},
title: "AAPL - 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, LineSeries, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, RangeAreaSeries, BollingerBands]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>- Customization of BollingerBand
stroke, stroke-width, and color of upperLine can be customized by using upperLine, and the lowerLine can be customized by using lowerLine properties of the indicator.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:tooltip='tooltip' :chartArea='chartArea' :crosshair='crosshair' :indicators='indicators'
:legendSettings='legendSettings' :zoomSettings='zoomSettings'>
<e-series-collection>
<e-series :dataSource='seriesData1' width=2 xName='x' yName='y' low='low' high='high' close='close' open='open'
volume='volume' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, BollingerBands, RangeAreaSeries } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
};
const chartArea = {
border: {
width: 0
}
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}M',
minimum: 50, maximum: 170, interval: 30,
majorGridLines: { width: 1 },
lineStyle: { width: 0 }
};
const indicators = [{
type: 'BollingerBands', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',
period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 }, lowerLine: { color: '#f2ec2f', width: 1 }
}];
const animation = { enable: true };
const zoomSettings = {
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = {
visible: false
};
const crosshair = { enable: true, lineType: 'Vertical' };
const tooltip = {
enable: true, shared: true
};
const title = "AAPL - 2012-2017";
provide('chart', [CandleSeries, Category, LineSeries, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, RangeAreaSeries, BollingerBands]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:tooltip='tooltip' :chartArea='chartArea' :crosshair='crosshair' :indicators='indicators'
:legendSettings='legendSettings' :zoomSettings='zoomSettings'>
<e-series-collection>
<e-series :dataSource='seriesData1' width=2 xName='x' yName='y' low='low' high='high' close='close' open='open'
volume='volume' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, BollingerBands, RangeAreaSeries } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
},
chartArea: {
border: {
width: 0
}
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}M',
minimum: 50, maximum: 170, interval: 30,
majorGridLines: { width: 1 },
lineStyle: { width: 0 }
},
indicators: [{
type: 'BollingerBands', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',
period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 }, lowerLine: { color: '#f2ec2f', width: 1 }
}],
animation: { enable: true },
zoomSettings: {
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: {
visible: false
},
crosshair: { enable: true, lineType: 'Vertical' },
tooltip: {
enable: true, shared: true
},
title: "AAPL - 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, LineSeries, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, RangeAreaSeries, BollingerBands]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Exponential Moving Average (EMA)
Moving average indicators are used to define the direction of the trend. To render an EMA indicator,
use indicator type as Ema and inject EMAIndicator into the provide.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, EmaIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
};
const chartArea = {
border: {
width: 0
}
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}M',
minimum: 50, maximum: 170, interval: 30,
majorGridLines: { width: 1 },
lineStyle: { width: 0 }
};
const indicators = [{
type: 'Ema', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',
period: 14, animation: { enable: true }
}];
const tooltip = {
enable: true, shared: true
};
const animation = { enable: false };
const crosshair = { enable: true, lineType: 'Vertical' };
const zoomSettings = {
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = { visible: false };
const title = "AAPL - 2012-2017";
provide('chart', [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, EmaIndicator]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, EmaIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
}, chartArea: {
border: {
width: 0
}
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}M',
minimum: 50, maximum: 170, interval: 30,
majorGridLines: { width: 1 },
lineStyle: { width: 0 }
},
indicators: [{
type: 'Ema', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',
period: 14, animation: { enable: true }
}],
tooltip: {
enable: true, shared: true
},
animation: { enable: false },
crosshair: { enable: true, lineType: 'Vertical' },
zoomSettings: {
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: { visible: false },
title: "AAPL - 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, EmaIndicator]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Momentum
Momentum shows the speed at which the stock price is changing. To render a Momentum indicator, use indicator type as Momentum and inject the MomentumIndicator module into provide. The Momentum indicator is represented by two lines (upperLine, signalLine). In the Momentum indicator, the upperBand value is always rendered at 100.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71'
bullFillColor='#e74c3d' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, MomentumIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}',
plotOffset: 25,
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },
};
const rows = [
{
height: '40%'
}, {
height: '60%'
}
];
const axes = [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 80, maximum: 120, interval: 20,
majorTickLines: { width: 0 }, title: 'Momentum', stripLines: [
{
start: 80, end: 120, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}];
const indicators = [{
type: 'Momentum', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }
}];
const tooltip = {
enable: true, shared: true
};
const animation = { enable: true };
const crosshair = { enable: true, lineType: 'Vertical' };
const chartArea = { border: { width: 0 } };
const zoomSettings =
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = { visible: false };
const title = "AAPL 2012-2017";
provide('chart', [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair' :tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low' high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, MomentumIndicator } from "@syncfusion/ej2-vue-charts";
let series1= [
{x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885,close: 87.12,volume: 646996264},
{x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285,close: 86.2857,volume: 866040680 },
{x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071,close: 82.4,volume: 367371310},
{x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457,close: 78.1514,volume: 919719846},
{x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,close: 75.3825,volume: 894382149},
{x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257,close: 81.6428,volume: 527416747},
{x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514,close: 83.6114,volume: 646467974},
{x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,close: 76.1785,volume: 980096264},
{x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257,close: 72.8277,volume: 835016110},
{x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043,close: 74.19,volume: 726150329},
{x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943,close: 72.7984,volume: 321104733},
{x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143,close: 75.2857,volume: 540854882},
{x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,close: 74.3285,volume: 574594262},
{x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543,close: 71.4285,volume: 803105621},
{x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428,close: 62.84,volume: 971912560},
{x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657,close: 64.8028,volume: 656549587},
{x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428,close: 67.8543,volume: 743778993},
{x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028,close: 65.7371,volume: 585292366},
{x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,close: 64.4014,volume: 421766997},
{x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257,close: 61.4957,volume: 582741215},
{x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571,close: 61.6743,volume: 632856539},
{x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343,close: 63.38,volume: 572066981},
{x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286,close: 65.9871,volume: 552156035},
{x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886,close: 63.2371,volume: 390762517},
{x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543,close: 60.4571,volume: 505273732},
{x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557,close: 61.4,volume: 387323550},
{x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143,close: 55.79,volume: 709945604},
{x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964,close: 59.6007,volume: 787007506},
{x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,close: 64.2828,volume: 655020017},
{x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543,close: 64.71,volume: 545488533},
{x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428,close: 61.8943,volume: 633706550},
{x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428,close: 63.5928,volume: 494379068},
{x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714,close: 64.2478,volume: 362907830},
{x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243,close: 63.1158,volume: 443249793},
{x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143,close: 61.4357,volume: 389680092},
{x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,close: 59.0714,volume: 400384818},
{x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528,close: 56.6471,volume: 519314826},
{x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171,close: 59.6314,volume: 343878841},
{x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257,close: 60.93,volume: 384106977},
{x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957,close: 60.7071,volume: 286035513},
{x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157,close: 62.9986,volume: 395816827},
{x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857,close: 66.0771,volume: 339668858},
{x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328,close: 71.7614,volume: 711563584},
{x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714,close: 71.5743,volume: 417119660},
{x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286,close: 69.6023,volume: 392805888},
{x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214,close: 71.1743,volume: 317244380},
{x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857,close: 66.4143,volume: 669376320},
{x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886,close: 66.7728,volume: 625142677},
{x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743,close: 68.9643,volume: 475274537},
{x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,close: 69.0043,volume: 368198906},
{x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257,close: 70.4017,volume: 361437661},
{x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071,close: 72.6985,volume: 342694379},
{x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757,close: 75.1368,volume: 490458997},
{x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057,close: 74.29,volume: 508130174},
{x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971,close: 74.3657,volume: 318132218},
{x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871,close: 74.9987,volume: 306711021},
{x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814,close: 74.2571,volume: 282778778},
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}',
plotOffset: 25,
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },
},
rows: [
{
height: '40%'
}, {
height: '60%'
}
],
axes: [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 80, maximum: 120, interval: 20,
majorTickLines: { width: 0 }, title: 'Momentum', stripLines: [
{
start: 80, end: 120, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}],
indicators: [{
type: 'Momentum', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }
}],
tooltip: {
enable: true, shared: true
},
animation: { enable: true },
crosshair: { enable: true, lineType: 'Vertical' },
chartArea: { border: { width: 0 } },
zoomSettings:
{
enableSelectionZooming: true,
mode: 'X',
enablePan : true
},
legendSettings: { visible: false },
title: "AAPL 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>- Customization of MomentumIndicator
stroke, stroke-width, and color of upperLine can be customized by using the upperLine, property of the indicator.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71'
bullFillColor='#e74c3d' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, MomentumIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}',
plotOffset: 25,
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },
};
const rows = [
{
height: '40%'
}, {
height: '60%'
}
];
const axes = [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 80, maximum: 120, interval: 20,
majorTickLines: { width: 0 }, title: 'Momentum', stripLines: [
{
start: 80, end: 120, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}];
const indicators = [{
type: 'Momentum', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }
}];
const tooltip = {
enable: true, shared: true
};
const animation = { enable: true };
const crosshair = { enable: true, lineType: 'Vertical' };
const chartArea = { border: { width: 0 } };
const zoomSettings =
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = { visible: false };
const title = "AAPL 2012-2017";
provide('chart', [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, MomentumIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}',
plotOffset: 25,
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },
},
rows: [
{
height: '40%'
}, {
height: '60%'
}
],
axes: [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 80, maximum: 120, interval: 20,
majorTickLines: { width: 0 }, title: 'Momentum', stripLines: [
{
start: 80, end: 120, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}],
indicators: [{
type: 'Momentum', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }
}],
tooltip: {
enable: true, shared: true
},
animation: { enable: true },
crosshair: { enable: true, lineType: 'Vertical' },
chartArea: { border: { width: 0 } },
zoomSettings:
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: { visible: false },
title: "AAPL 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Moving Average Convergence Divergence (MACD)
MACD is based on the difference between two EMA’s. To render a MACD indicator, use indicator type as Macd and inject the MacdIndicator module into provide. The MACD indicator is represented by the MACD line, signal line, and MACD histogram. The MACD histogram highlights the difference between the MACD line and the signal line.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71'
bullFillColor='#e74c3d' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, ColumnSeries, MacdIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}',
plotOffset: 25,
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
};
const rows = [
{
height: '40%'
}, {
height: '60%'
}
];
const axes = [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3.5,
majorTickLines: { width: 0 }, title: 'MACD', stripLines: [
{
start: -3.5, end: 3.5, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}];
const indicators = [{
type: 'Macd',
period: 3,
fastPeriod: 8,
slowPeriod: 5,
seriesName: 'Apple Inc',
macdType: 'Both',
width: 2,
macdPositiveColor: '#2ecd71',
macdNegativeColor: '#e74c3d',
fill: '#6063ff',
yAxisName: 'secondary'
}];
const tooltip = {
enable: true, shared: true
};
const animation = { enable: true };
const crosshair = { enable: true, lineType: 'Vertical' };
const chartArea = { border: { width: 0 } };
const zoomSettings =
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = { visible: false };
const title = "AAPL 2012-2017";
provide('chart', [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, MacdIndicator, StripLine, ColumnSeries]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, ColumnSeries, MacdIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}',
plotOffset: 25,
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
},
rows: [
{
height: '40%'
}, {
height: '60%'
}
],
axes: [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3.5,
majorTickLines: { width: 0 }, title: 'MACD', stripLines: [
{
start: -3.5, end: 3.5, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}],
indicators: [{
type: 'Macd',
period: 3,
fastPeriod: 8,
slowPeriod: 5,
seriesName: 'Apple Inc',
macdType: 'Both',
width: 2,
macdPositiveColor: '#2ecd71',
macdNegativeColor: '#e74c3d',
fill: '#6063ff',
yAxisName: 'secondary'
}],
tooltip: {
enable: true, shared: true
},
animation: { enable: true },
crosshair: { enable: true, lineType: 'Vertical' },
chartArea: { border: { width: 0 } },
zoomSettings:
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: { visible: false },
title: "AAPL 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, MacdIndicator, StripLine, ColumnSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>- Customization of MACD
stroke, stroke-width, and color of macdLine can be customized by using the macdLine property of the indicator. The positive and negative changes of the histogram can be customized by macdPositiveColor and macdNegativeColor properties. The [macdType] is used to define the type of MACD indicator. To customize the MACD period using slowPeriod and fastPeriod properties.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71'
bullFillColor='#e74c3d' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, ColumnSeries, MacdIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}',
plotOffset: 25,
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
};
const rows = [
{
height: '40%'
}, {
height: '60%'
}
];
const axes = [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3.5,
majorTickLines: { width: 0 }, title: 'MACD', stripLines: [
{
start: -3.5, end: 3.5, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}];
const indicators = [{
type: 'Macd',
period: 3,
fastPeriod: 8,
slowPeriod: 5,
seriesName: 'Apple Inc',
macdType: 'Both',
width: 2,
macdPositiveColor: '#2ecd71',
macdNegativeColor: '#e74c3d',
fill: '#6063ff',
yAxisName: 'secondary'
}];
const tooltip = {
enable: true, shared: true
};
const animation = { enable: true };
const crosshair = { enable: true, lineType: 'Vertical' };
const chartArea = { border: { width: 0 } };
const zoomSettings =
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = { visible: false };
const title = "AAPL 2012-2017";
provide('chart', [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, MacdIndicator, StripLine, ColumnSeries]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71'
bullFillColor='#e74c3d' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, ColumnSeries, MacdIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true }
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}',
plotOffset: 25,
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
},
rows: [
{
height: '40%'
}, {
height: '60%'
}
],
axes: [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3.5,
majorTickLines: { width: 0 }, title: 'MACD', stripLines: [
{
start: -3.5, end: 3.5, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}],
indicators: [{
type: 'Macd',
period: 3,
fastPeriod: 8,
slowPeriod: 5,
seriesName: 'Apple Inc',
macdType: 'Both',
width: 2,
macdPositiveColor: '#2ecd71',
macdNegativeColor: '#e74c3d',
fill: '#6063ff',
yAxisName: 'secondary'
}],
tooltip: {
enable: true, shared: true
},
animation: { enable: true },
crosshair: { enable: true, lineType: 'Vertical' },
chartArea: { border: { width: 0 } },
zoomSettings:
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: { visible: false },
title: "AAPL 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, MacdIndicator, StripLine, ColumnSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Relative Strength Index (RSI)
RSI shows how strongly a stock is moving in its current direction. To render an RSI indicator, use indicator type as Rsi and inject the RsiIndicator module into services. The RSI indicator is represented by three lines (upperBand, lowerBand, signalLine). The upperBand and lowerBand values are customized by overBought and overSold properties of the indicator, and the signalLine is calculated using the RSI formula.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, RsiIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}',
plotOffset: 25,
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
};
const rows = [
{
height: '40%'
}, {
height: '60%'
}
];
const axes = [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 0, maximum: 120, interval: 60,
majorTickLines: { width: 0 }, title: 'RSI', stripLines: [
{
start: 0, end: 120, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}];
const indicators = [{
type: 'Rsi', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
showZones: true, overBought: 70, overSold: 30,
period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }, lowerLine: { color: '#2ecd71' }
}];
const tooltip = {
enable: true, shared: true
};
const animation = { enable: true };
const crosshair = { enable: true, lineType: 'Vertical' };
const chartArea = { border: { width: 0 } };
const zoomSettings =
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = { visible: false };
const title = "AAPL 2012-2017";
provide('chart', [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, RsiIndicator, StripLine]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, RsiIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}',
plotOffset: 25,
minimum: 50, maximum: 170,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
},
rows: [
{
height: '40%'
}, {
height: '60%'
}
],
axes: [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 0, maximum: 120, interval: 60,
majorTickLines: { width: 0 }, title: 'RSI', stripLines: [
{
start: 0, end: 120, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}],
indicators: [{
type: 'Rsi', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
showZones: true, overBought: 70, overSold: 30,
period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }, lowerLine: { color: '#2ecd71' }
}],
tooltip: {
enable: true, shared: true
},
animation: { enable: true },
crosshair: { enable: true, lineType: 'Vertical' },
chartArea: { border: { width: 0 } },
zoomSettings:
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: { visible: false },
title: "AAPL 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, RsiIndicator, StripLine]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Simple Moving Average (SMA)
Moving average Indicators are used to define the direction of the trend. To render a SMA indicator,
use indicator type as Sma and inject the SmaIndicator module using provide.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, SmaIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
};
const chartArea = {
border: {
width: 0
}
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}M',
minimum: 50, maximum: 170, interval: 30,
majorGridLines: { width: 1 },
lineStyle: { width: 0 }
};
const indicators = [{
type: 'Sma', field: 'Close', seriesName: 'Apple Inc', fill: '#6063ff',
period: 14, animation: { enable: true }
}];
const tooltip = {
enable: true, shared: true
};
const animation = { enable: false };
const crosshair = { enable: true, lineType: 'Vertical' };
const zoomSettings = {
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = { visible: false };
const title = "AAPL - 2012-2017";
provide('chart', [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, SmaIndicator]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, SmaIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
},
chartArea: {
border: {
width: 0
}
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}M',
minimum: 50, maximum: 170, interval: 30,
majorGridLines: { width: 1 },
lineStyle: { width: 0 }
},
indicators: [{
type: 'Sma', field: 'Close', seriesName: 'Apple Inc', fill: '#6063ff',
period: 14, animation: { enable: true }
}],
tooltip: {
enable: true, shared: true
},
animation: { enable: false },
crosshair: { enable: true, lineType: 'Vertical' },
zoomSettings: {
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: { visible: false },
title: "AAPL - 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, SmaIndicator]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Stochastic
Stochastic shows how a stock compares to its previous price levels. To render a Stochastic indicator, use indicator typeas Stochastic and inject the StochasticIndicator module into services. The Stochastic indicator is represented by four lines (upperLine, lowerLine, periodLine, signalLine). The upperBand and lowerBand values are customized by overBought and overSold properties of the indicator, and the periodLine and signalLine are rendered based on the stochastic formula.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71'
bullFillColor='#e74c3d' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, StochasticIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}',
minimum: 80, maximum: 170,
plotOffset: 25,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
};
const rows = [
{
height: '40%'
}, {
height: '60%'
}
];
const axes = [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 0, maximum: 120, interval: 60,
majorTickLines: { width: 0 }, title: 'Stochastic', stripLines: [
{
start: 0, end: 120, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}];
const indicators = [{
type: 'Stochastic', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
kPeriod: 2, dPeriod: 3, showZones: true, periodLine: { color: '#f2ec2f' },
period: 3, animation: { enable: false }, upperLine: { color: '#e74c3d' }, lowerLine: { color: '#2ecd71' }
}];
const tooltip = {
enable: true, shared: true
};
const animation = { enable: true };
const crosshair = { enable: true, lineType: 'Vertical' };
const chartArea = { border: { width: 0 } };
const zoomSettings =
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = { visible: false };
const title = "AAPL 2012-2017";
provide('chart', [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, StochasticIndicator, StripLine]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, StochasticIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}',
minimum: 80, maximum: 170,
plotOffset: 25,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
},
rows: [
{
height: '40%'
}, {
height: '60%'
}
],
axes: [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 0, maximum: 120, interval: 60,
majorTickLines: { width: 0 }, title: 'Stochastic', stripLines: [
{
start: 0, end: 120, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}],
indicators: [{
type: 'Stochastic', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
kPeriod: 2, dPeriod: 3, showZones: true, periodLine: { color: '#f2ec2f' },
period: 3, animation: { enable: false }, upperLine: { color: '#e74c3d' }, lowerLine: { color: '#2ecd71' }
}],
tooltip: {
enable: true, shared: true
},
animation: { enable: true },
crosshair: { enable: true, lineType: 'Vertical' },
chartArea: { border: { width: 0 } },
zoomSettings:
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: { visible: false },
title: "AAPL 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, StochasticIndicator, StripLine]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>- Customization of StochasticIndicator
stroke, stroke-width, and color of upperLine can be customized by using upperLine, the lowerLine can be customized by using lowerLine and the periodLine can be customized by using periodLine properties of the indicator. Customize the period used to find the average price using kPeriod and dPeriod properties.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71'
bullFillColor='#e74c3d' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, StochasticIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
const seriesData1 = series1;
const primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price',
labelFormat: '${value}',
minimum: 80, maximum: 170,
plotOffset: 25,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
};
const rows = [
{
height: '40%'
}, {
height: '60%'
}
];
const axes = [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 0, maximum: 120, interval: 60,
majorTickLines: { width: 0 }, title: 'Stochastic', stripLines: [
{
start: 0, end: 120, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}];
const indicators = [{
type: 'Stochastic', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
kPeriod: 2, dPeriod: 3, showZones: true, periodLine: { color: '#f2ec2f' },
period: 3, animation: { enable: false }, upperLine: { color: '#e74c3d' }, lowerLine: { color: '#2ecd71' }
}];
const tooltip = {
enable: true, shared: true
};
const animation = { enable: true };
const crosshair = { enable: true, lineType: 'Vertical' };
const chartArea = { border: { width: 0 } };
const zoomSettings =
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
};
const legendSettings = { visible: false };
const title = "AAPL 2012-2017";
provide('chart', [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, StochasticIndicator, StripLine]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :indicators='indicators' :crosshair='crosshair'
:tooltip='tooltip' :zoomSettings='zoomSettings' :axes='axes' :rows='rows'>
<e-series-collection>
<e-series :dataSource='seriesData1' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low'
high='high' close='close' open='open' volume='volume' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, CandleSeries, Tooltip, DateTime, Zoom, Crosshair, LineSeries, Logarithmic, StripLine, StochasticIndicator } from "@syncfusion/ej2-vue-charts";
let series1 = [
{ x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
{ x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
{ x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
{ x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
{ x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
{ x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
{ x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
{ x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
{ x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
{ x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
{ x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
{ x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
{ x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
{ x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
{ x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
{ x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
{ x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
{ x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
{ x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
{ x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
{ x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
{ x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
{ x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
{ x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
{ x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
{ x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
{ x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
{ x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
{ x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
{ x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
{ x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
{ x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
{ x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
{ x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
{ x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
{ x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
{ x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
{ x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
{ x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
{ x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
{ x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
{ x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
{ x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
{ x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
{ x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
{ x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
{ x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
{ x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
{ x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
{ x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
{ x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
{ x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
{ x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
{ x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
{ x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
{ x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
{ x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData1: series1,
primaryXAxis: {
valueType: 'DateTime',
majorGridLines: { width: 0 },
zoomFactor: 0.2, zoomPosition: 0.6,
crosshairTooltip: { enable: true },
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Price',
labelFormat: '${value}',
minimum: 80, maximum: 170,
plotOffset: 25,
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
},
rows: [
{
height: '40%'
}, {
height: '60%'
}
],
axes: [{
name: 'secondary',
opposedPosition: true, rowIndex: 0,
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 0, maximum: 120, interval: 60,
majorTickLines: { width: 0 }, title: 'Stochastic', stripLines: [
{
start: 0, end: 120, text: '', color: 'black', visible: true,
opacity: 0.03, zIndex: 'Behind'
}]
}],
indicators: [{
type: 'Stochastic', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
kPeriod: 2, dPeriod: 3, showZones: true, periodLine: { color: '#f2ec2f' },
period: 3, animation: { enable: false }, upperLine: { color: '#e74c3d' }, lowerLine: { color: '#2ecd71' }
}],
tooltip: {
enable: true, shared: true
},
animation: { enable: true },
crosshair: { enable: true, lineType: 'Vertical' },
chartArea: { border: { width: 0 } },
zoomSettings:
{
enableSelectionZooming: true,
mode: 'X',
enablePan: true
},
legendSettings: { visible: false },
title: "AAPL 2012-2017"
};
},
provide: {
chart: [CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, StochasticIndicator, StripLine]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>