Candle Chart with Indicators

[Christian DAquino]

I'm trying to create a candle chart with Bollinger Bands and RSI. But when I use the "axisRangeCalculated" method to update the axis, the chart doesn't render. What and I'm doing wrong?

<template>
  <ejs-chart
    id='chart'
    ref='chart'
    :axes='axes'
    :axis-range-calculated='axisRangeCalculated'
    :chart-area='chartArea'
    :crosshair='crosshair'
    :indicators='indicators'
    :legend-settings='legendSettings'
    :primary-x-axis='primaryXAxis'
    :primary-y-axis='primaryYAxis'
    :rows='rows'
    :title='ticker'
    :tooltip='tooltip'
    :zoom-settings='zoomSettings'
  >
    <e-series-collection>
      <e-series
        :animation='animation'
        close='adjusted_close'
        :data-source='data'
        high='adjusted_high'
        low='adjusted_low'
        name='eod'
        open='adjusted_open'
        type='Candle'
        volume='volume'
        :width='2'
        x-name='date'
      />
    </e-series-collection>
  </ejs-chart>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import EodApi from 'modules/Price/Models/EodApi'
import {
  BollingerBands,
  CandleSeries,
  Category,
  ChartAnnotation,
  ChartComponent,
  Crosshair,
  DataLabel,
  DateTime,
  DateTimeCategory,
  Highlight,
  LineSeries,
  Logarithmic,
  RangeAreaSeries,
  RsiIndicator,
  SeriesCollectionDirective,
  SeriesDirective,
  SmaIndicator,
  SplineRangeAreaSeries,
  StripLine,
  Tooltip,
  Zoom
} from '@syncfusion/ej2-vue-charts'
import type { IApiResponse } from '@konnec/vue-eloquent/dist/src/api/IApiResponse'
import TechnicalApi from 'modules/Fundamentals/Models/TechnicalApi'
import { chart_high, chart_interval, chart_low } from 'modules/Price/Actions/prices'

export default defineComponent({
  components: {
    EjsChart: ChartComponent,
    ESeriesCollection: SeriesCollectionDirective,
    ESeries: SeriesDirective,
  },
  provide: {
    chart: [
      CandleSeries,
      Category,
      DateTime,
      DateTimeCategory,
      BollingerBands,
      RsiIndicator,
      SmaIndicator,
      DataLabel,
      ChartAnnotation,
      Tooltip,
      Zoom,
      Crosshair,
      Highlight,
      LineSeries,
      RangeAreaSeries,
      SplineRangeAreaSeries,
      Logarithmic,
      StripLine
    ]
  },
  props: {
    ticker: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      data: [] as any[],
      primaryXAxis: {
        valueType: 'DateTimeCategory',
        // title: 'Date',
        // zoomFactor: 0.2,
        // zoomPosition: 0.6,
        majorGridLines: { width: 0 },
        intervalType: 'Days',
        labelFormat: 'dd/MMM',
        crosshairTooltip: { enable: true },
      },
      primaryYAxis: {
        // title: 'Price',
        minimum: 190,
        maximum: 220,
        interval: 10,
        plotOffset: 25,
        rowIndex: 1,
        opposedPosition: true,
        lineStyle: { width: 0 }
      },
      animation: {
        enable: true
      },
      axes: [{
        name: 'secondary',
        opposedPosition: true, rowIndex: 0,
        majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 0, maximum: 120, interval: 60,
        majorTickLines: { width: 0 }, title: 'RSI', stripLines: [
          {
            start: 0, end: 120, text: '', color: 'black', visible: true,
            opacity: 0.03, zIndex: 'Behind'
          }]
      }],
      rows: [
        {
          height: '40%'
        }, {
          height: '60%'
        }
      ],
      chartArea: { border: { width: 0 } },
      indicators: [
        {
          type: 'BollingerBands', field: 'Close', seriesName: 'eod', yAxisName: 'secondary', fill: '#6063ff',
          period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 },
          lowerLine: { color: '#f2ec2f', width: 1 }
        },
        {
          type: 'Rsi', field: 'Close', seriesName: 'eod', yAxisName: 'secondary', fill: '#6063ff',
          showZones: true, overBought: 70, overSold: 30,
          period: 14, animation: { enable: true }, upperLine: { color: '#e74c3d' }, lowerLine: { color: '#2ecd71' }
        }
      ],
      legendSettings: { visible: false },
      crosshair: {
        enable: true,
        // lineType: 'Vertical'
      },
      tooltip: {
        enable: true,
        shared: true
      },
      zoomSettings: {
        enableSelectionZooming: true,
        mode: 'X',
        enablePan: true
      },
      title: 'EOD'
    }
  },
  watch: {
    ticker() {
      this.fetch()
    }
  },
  created(): any {
    this.fetch()
  },
  methods: {
    fetch(){
      EodApi.where({
        ticker: this.ticker,
        year: 2025,
        from: '2025-06-01'
      }).get().then((response: IApiResponse<any>) => {
        this.data = [...response.data]
      })
      TechnicalApi.where({
        ticker: this.ticker,
        year: 2025,
        from: '2025-06-01'
      }).get()
    },
    axisRangeCalculated(args: any) {
      if (this.data.length > 0) {
        const high = chart_high(this.data)
        const low = chart_low(this.data)
        console.log(args)
        args.maximum = high
        args.minimum = low
        args.interval = chart_interval(low, high)
        console.log(low, high)
      }
    }
  }
})
</script>

[Christian DAquino]

Ok, I've just realized that there is a specific Stock Chart component which works fine. This can be ignored. Thanks.

[Mukilan Sethuraman]

Hi Christian DAquino,

Thank you for the update.

We're glad to hear that the Chart component is working well for your scenario.

If you need any further assistance or have additional questions, feel free to reach out. We're here to help!

Best Regards,

Mukilan S.