Axis types in Vue Stock chart component
3 Mar 20236 minutes to read
DateTime Axis
Date time axis uses date time scale and displays the date time values as axis labels in the specified format and set the valueType
of axis to DateTime.
<template>
<div class="control-section">
<div>
<ejs-stockchart
id="stockchartcontainer"
: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 Vue from "vue";
import { chartData } from "./datasource.js";
import {
StockChartPlugin, 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";
Vue.use(StockChartPlugin);
export default {
data() {
return {
seriesData:chartData,
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
lineStyle: { color: "transparent" },
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>
Note: To use datetime axis, we need to inject
DateTimeService
into theprovide
and set thevalueType
of axis toDateTime
.
Logarithmic Axis
Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106) and set the valueType
of axis to Lograthmic
.
<template>
<div class="control-section">
<div>
<ejs-stockchart
id="stockchartcontainer"
:primaryXAxis="primaryXAxis"
:primaryYAxis="primaryYAxis"
:title="title">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' yName='volume' low='low' high='high' open='open' close='close'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { chartData } from "./datasource.js";
import {
StockChartPlugin, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries, Logarithmic,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export
} from "@syncfusion/ej2-vue-charts";
Vue.use(StockChartPlugin);
export default {
data() {
return {
seriesData:chartData,
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
valueType: 'Logarithmic',
majorTickLines: { color: "transparent", width: 0 }
},
title: 'AAPL Stock Price'
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,Logarithmic,
BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Note: To use log axis, we need to inject
LogarithmicService
into theprovide
and set thevalueType
of axis toLogarithmic
.