CODEWITHSUNDEEP
vue.jsapexcharts
James Weeks
James Weeks

Reputation: 121

ApexCharts How to update y-axis scales dynamically?

I am using ApexCharts with the Vue wrapper. I can successfully change the min and max values by setting them with a function. this.options.yaxis[0].min = Number(4500); for example, when I log it out in the console, the value is what I set it to. However, it seems to have no effect on the chart itself, the scales still read defaults of the pushed series. 

initGraph(data) {
  var tempNum = 0;
  var tempNum2 = tempNum;
  this.options.yaxis[0].max = Number(5000);
  this.options.yaxis[0].min = Number(4500);
  console.log(this.options.yaxis[0].min);
  console.log(this.options.yaxis[0].max);
  for (var series in data) {
    this.series.push(data[series]);
  }
}

My goal is to change the scales on the y-axis as new series are filtered into the series object.

Upvotes: 7

Views: 11592

Answers (2)

vahid sabet
vahid sabet

Reputation: 583

Update option before update series and it works:

chart.updateOptions( {
  xaxis: {
    categories: ["Stackoverflow", "is", "great"]
  },
  yaxis: {
    min: 4500,
    max: 5000
  }
});

Upvotes: 3

junedchhipa
junedchhipa

Reputation: 5627

You need to update the whole options config and not just a single property to allow the Vue watcher to catch the change.

this.options = {
  yaxis: {
    min: 4500,
    max: 5000
  }
}

Upvotes: 4

Related Questions