Updating yaxis min and max

[microwavesafe]

I'm trying to update the yaxis min and max through the options object

<apexcharts type="line" :options="options" :series="series"></apexcharts>

data() {
  return {
    options: {
      yaxis: {
        min: undefined,
        max: undefined,
      },
    },
  }
}

yRangeChanged(min, max) {
  this.options.yaxis.min = min;
  this.options.yaxis.max = max;
 }

But this doesn't work. The object is correctly updated, but the Y axis range stays the same. If I manually set yaxis.min and yaxis.max to begin with, the graph displays correctly. I noticed a commit which added a Yaxis prop, but it looks like this was taken out straight away.

Am I missing something when trying to update these values?

[microwavesafe]

If I create a new object it does work

yRangeChanged(min, max) {
  this.options = {...this.options, ...{
    yaxis: {
      min: min,
      max: max,
    }
  }}
}

[microwavesafe]

Looking at the code

      this.$watch('options', function (options) {
        if (!_this.chart && options) {
          _this.init();
        } else {
          _this.chart.updateOptions(_this.options, true);
        }
      });

would it help to add the deep: true property?

      this.$watch('options', function (options) {
        if (!_this.chart && options) {
          _this.init();
        } else {
          _this.chart.updateOptions(_this.options, true);
        }
      }, {
        deep: true
      });

[junedchhipa]

Which version of apexcharts/Vue-apexcharts are you using?

Here is a codesandbox demo of updating yaxis values working correctly.

[microwavesafe]

I can confirm that this method works

yRangeChanged(min, max) {
  this.options = {
    yaxis: {
      max: max,
      min: min
    }
  }
}

but if we add the deep: true property, couldn't I do this?

yRangeChanged(min, max) {
  this.options.yaxis.min = min;
  this.options.yaxis.max = max;
 }

I guess there's not much in it, it just looks a bit neater.

[junedchhipa]

The deep property will unnecessarily fire update event for tiny changes.

For eg, in your example

yRangeChanged(min, max) {
  this.options.yaxis.min = min;
  this.options.yaxis.max = max;
}

the updateOptions() method would fire twice, and update() is a costly method as it redraws the entire chart.

[microwavesafe]

Fair point. I do get a strange side affect though when using

yRangeChanged(min, max) {
  this.options = {
    yaxis: {
      max: max,
      min: min
    }
  }
}

I have a data set with 60 points, if I initially set my xaxis min to 0 and max to 10, it correctly shows the first 10 points. Then I change the yaxis min and max with the above code. It resets my axis range to 0 to 60, even if I do this.

yRangeChanged(min, max) {
  this.options = {
    yaxis: {
      min: min,
      max: max,
    },
    xaxis: {
      min: 0,
      max: 10
    }
  }
},

is this the expected behaviour?

[junedchhipa]

No, not expected behavior.

Working example on codesandbox

[microwavesafe]

By the way, thanks for all your help. I've tried copying all my settings into the codepen and your quite right, it doesn't behave like that. But when I run exactly the same code on my site, it rescales the X as well. I can't see any difference in how we're doing it.

For now I will manually edit the data series to just what I need, this will have the same effect.