Period selector in Vue Stock chart component
13 Jun 202412 minutes to read
The period selector allows to select a range with specified periods. By default the period selector is enabled in stock chart.
Periods
Periods is an array of objects that allows users to specify the range of periods
. The interval
property specifies the count value of the button, and the text
property specifies the text to be displayed on button. The intervalType
property allows users to customize the intervals of the buttons. The intervalType
property supports the following interval types:
- Auto
- Years
- Quarter
- Months
- Weeks
- Days
- Hours
- Minutes
- Seconds
<template>
<div class="control-section">
<div>
<ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" :title="title">
<e-stockchart-periods>
<e-stockchart-period intervalType="Minutes" interval="1" text="1m"></e-stockchart-period>
<e-stockchart-period intervalType="Minutes" interval="30" text="30m"></e-stockchart-period>
<e-stockchart-period intervalType="Hours" interval="1" text="1H"></e-stockchart-period>
<e-stockchart-period intervalType="Hours" interval="12" text="12H" selected="true"></e-stockchart-period>
<e-stockchart-period text="1D"></e-stockchart-period>
</e-stockchart-periods>
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
open='open' close='close'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { chartData } from "./datasource.js";
import {
StockChartComponent as EjsStockchart, StockChartSeriesCollectionDirective as EStockchartSeriesCollection, StockChartSeriesDirective as EStockchartSeries, StockChartPeriodsDirective as EStockchartPeriods, StockChartPeriodDirective as EStockchartPeriod, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export
} from "@syncfusion/ej2-vue-charts";
const seriesData = chartData;
const primaryXAxis = {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
};
const primaryYAxis = {
majorTickLines: { color: "transparent", width: 0 }
};
const title = 'AAPL Stock Price';
provide('stockChart', [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,
BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export
]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div class="control-section">
<div>
<ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" :title="title">
<e-stockchart-periods>
<e-stockchart-period intervalType="Minutes" interval="1" text="1m"></e-stockchart-period>
<e-stockchart-period intervalType="Minutes" interval="30" text="30m"></e-stockchart-period>
<e-stockchart-period intervalType="Hours" interval="1" text="1H"></e-stockchart-period>
<e-stockchart-period intervalType="Hours" interval="12" text="12H" selected="true"></e-stockchart-period>
<e-stockchart-period text="1D"></e-stockchart-period>
</e-stockchart-periods>
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
open='open' close='close'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
</div>
</div>
</template>
<script>
import { chartData } from "./datasource.js";
import {
StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, StockChartPeriodsDirective, StockChartPeriodDirective, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export
} from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"e-stockchart-periods": StockChartPeriodsDirective,
"e-stockchart-period": StockChartPeriodDirective,
'ejs-stockchart': StockChartComponent,
'e-stockchart-series-collection': StockChartSeriesCollectionDirective,
'e-stockchart-series': StockChartSeriesDirective
},
data() {
return {
seriesData: chartData,
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
majorTickLines: { color: "transparent", width: 0 }
},
title: 'AAPL Stock Price',
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,
BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Visibility of period selector
The enablePeriodSelector
property allows users to toggle the visibility of period selector.
<template>
<div class="control-section">
<div>
<ejs-stockchart id="stockchartcontainer" :enablePeriodSelector="enablePeriodSelector" :primaryXAxis="primaryXAxis"
:primaryYAxis="primaryYAxis" :title="title">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
open='open' close='close'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { chartData } from "./datasource.js";
import {
StockChartComponent as EjsStockchart, StockChartSeriesCollectionDirective as EStockchartSeriesCollection, StockChartSeriesDirective as EStockchartSeries, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export
} from "@syncfusion/ej2-vue-charts";
const seriesData = chartData;
const primaryXAxis = {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
};
const primaryYAxis = {
majorTickLines: { color: "transparent", width: 0 }
};
const enablePeriodSelector = false;
const title = 'AAPL Stock Price';
provide('stockChart', [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,
BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export
]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div class="control-section">
<div>
<ejs-stockchart id="stockchartcontainer" :enablePeriodSelector="enablePeriodSelector" :primaryXAxis="primaryXAxis"
:primaryYAxis="primaryYAxis" :title="title">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
open='open' close='close'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
</div>
</div>
</template>
<script>
import { chartData } from "./datasource.js";
import {
StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, DateTime, CandleSeries, RangeTooltip, LineSeries, SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export
} from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-stockchart': StockChartComponent,
'e-stockchart-series-collection': StockChartSeriesCollectionDirective,
'e-stockchart-series': StockChartSeriesDirective
},
data() {
return {
seriesData: chartData,
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
majorTickLines: { color: "transparent", width: 0 }
},
enablePeriodSelector: false,
title: 'AAPL Stock Price',
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,
BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>