Amcharts "TypeError: this.chart.zoomToDates is not a function"

Question

I'm trying to follow this primer to create external zoom control.

I have 3 buttons

  <v-btn v-on:click="showPeriod('1 month')">1 month</v-btn>
  <v-btn v-on:click="showPeriod('3 month')">3 month</v-btn>
  <v-btn v-on:click="showPeriod('6 month')">6 month</v-btn>

and the eventListener showPeriod

  showPeriod: function(period) {
    console.log("Periods", this.periods)
    if (period != 'All'){
      this.changeDataZoom(this.periods[period])
    }
    else {
      //Logic fot 'ALL' period
    }
  },

  changeDataZoom: function (rawPeriod) {
    let regex = /([0-9]{2,4}[\-][0-9]{2}[\-][0-9]{2}).*?/g
    let periods = []

    rawPeriod.match(regex).forEach(function (period) {
      periods.push(moment(period,"YYYY-MM-D").format("YYYY-MM-DD"))
    })

    //Periods ["2018-01-26", "2018-07-27"]
    this.chart.zoomToDates(periods[0], periods[1])
  },

But when I trying to call this.chart.zoomToDates I get an error "TypeError: this.chart.zoomToDates is not a function"

I also tried to convert string to date using AmCharts.stringToDate but it didn't help me either. Link to reproduce an error

P.S. I know about periods property - but in this case 1 month is not actually the calendar month, so I need to specify dates manually.

Answer 1

That codepen uses serial chart and you're using stock chart.

Serial chart has method zoomToDates

zoomToDates(start, end)
start - start date, Date object \ end - end date, Date object

Stock chart has method zoom

zoom(startDate, endDate)
startDate, endDate - Date objects.

So, you need something like:

changeDataZoom: function (rawPeriod) {
    let regex = /([0-9]{2,4}[\-][0-9]{2}[\-][0-9]{2}).*?/g
    let periods = []

    rawPeriod.match(regex).forEach(function (period) {
      periods.push(moment(period,"YYYY-MM-D").format("YYYY-MM-DD"))
    })

    //Periods ["2018-01-26", "2018-07-27"]
    this.chart.zoom(new Date(periods[0]), new Date(periods[1]))
}