Series types in Vue Stock chart component
13 Jun 20245 minutes to read
Essential JS 2 StockChart supports 6 major types of series namely Line
, Spline
, Hilo
, HiloOpenClose
, Hollow Candle
and Candle
. By using the series dropdown button you can navigate between the above listed series types.
Line
To render a line series, use series type
as Line
and
inject LineSeries
into the provide
.
Spline
To render a spline series, use series type
as Spline
and inject SplineSeries
into the provide
.
Hilo
To render a hilo series, use series type
as Hilo
and
inject HiloSeries
into the provide
.
HiloOpenClose
To render a hiloOpenClose series, use series type
as HiloOpenClose
and inject HiloOpenCloseSeries
into the provide
.
HollowCandle
To render a hollowcandle series, use series type
as Candle
and set enableSolidCandle
as false. Now inject CandleSeries
into the provide
.
Candle
To render a candle series, use series type
as Candle
and inject CandleSeries
into the provide
.
<template>
<div class="control-section">
<div>
<ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
:indicatorType="indicatorType" :trendlineType="trendlineType" :exportType="exportType" :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
} from "@syncfusion/ej2-vue-charts";
const seriesData = chartData;
const primaryXAxis = {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
};
const primaryYAxis = {
majorTickLines: { color: "transparent", width: 0 }
};
const indicatorType = [];
const trendlineType = [];
const exportType = [];
const title = 'AAPL Stock Price';
provide('stockChart', [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div class="control-section">
<div>
<ejs-stockchart id="stockchartcontainer" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
:indicatorType="indicatorType" :trendlineType="trendlineType" :exportType="exportType" :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
} 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 }
},
indicatorType: [],
trendlineType: [],
exportType: [],
title: 'AAPL Stock Price'
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>