Axis types in Vue Stock chart component
25 Sep 20239 minutes to read
DateTime axis
DateTime axis uses date time scale and displays the date time values as axis labels in the specified format. To use DateTime axis, 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 this axis, we need to inject
DateTimeService
into theprovide
and set thevalueType
of axis toDateTime
.
DateTimeCategory axis
DateTimeCategory axis in the stock chart is used to display only business days. To use DateTimeCategory axis, set the valueType
of axis to DateTimeCategory
.
<template>
<div class="control-section">
<div>
<ejs-stockchart
id="stockchartcontainer"
:primaryXAxis="primaryXAxis"
:title="title"
:crosshair="crosshair"
:tooltip="tooltip">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" type="Line" xName='x' yName='y'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { series2 } from "./datasource.ts";
import {
StockChartPlugin, DateTimeCategory, CandleSeries, RangeTooltip, LineSeries, SplineSeries, Tooltip, Crosshair,
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: series2,
primaryXAxis: {
valueType: "DateTimeCategory",
majorGridLines: { width: 0 },
crosshairTooltip: { enable: true }
},
crosshair: {
enable: true
},
tooltip: { enable: true, header: 'AAPL Stock Price' }
};
},
provide: {
stockChart: [
DateTimeCategory, RangeTooltip, LineSeries, SplineSeries, CandleSeries, Tooltip, Crosshair, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,
BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Note: To use this axis, we need to inject
DateTimeCategoryService
into theprovide
and set thevalueType
of axis toDateTimeCategory
.
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). To use Logarithmic axis, set the valueType
of axis to Logarithmic
.
<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 this axis, we need to inject
LogarithmicService
into theprovide
and set thevalueType
of axis toLogarithmic
.