Series types in Vue Stock chart component

3 Mar 20233 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.


To render a line series, use series type as Line and
inject LineSeries into the provide.


To render a spline series, use series type as Spline and inject SplineSeries into the provide.


To render a hilo series, use series type as Hilo and
inject HiloSeries into the provide.


To render a hiloOpenClose series, use series type as HiloOpenClose and inject HiloOpenCloseSeries into the provide.


To render a hollowcandle series, use series type as Candle and set enableSolidCandle as false. Now inject CandleSeries into the provide.


To render a candle series, use series type as Candle and inject CandleSeries into the provide.

  <div class="control-section">
          <e-stockchart-series :dataSource="seriesData" type="Candle"  volume='volume' xName='date' low='low' high='high' open='open' close='close'></e-stockchart-series>
import Vue from "vue";
import { chartData } from "./datasource.js";
import {
  StockChartPlugin, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
  HiloOpenCloseSeries, HiloSeries, RangeAreaSeries
} from "@syncfusion/ej2-vue-charts";


export default {
  data() {
    return {
        primaryXAxis: {
            valueType: "DateTime",
            majorGridLines: { color: "transparent" },
        primaryYAxis: {
            majorTickLines: { color: "transparent", width: 0 }
      trendlineType: [],
      exportType: [],
      title: 'AAPL Stock Price',
  provide: {
    stockChart: [
      DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries ]
#container {
   height: 350px;