Comments (8)
If I create a new object it does work
yRangeChanged(min, max) {
this.options = {...this.options, ...{
yaxis: {
min: min,
max: max,
}
}}
}
from vue-apexcharts.
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
});
from vue-apexcharts.
Which version of apexcharts/Vue-apexcharts are you using?
Here is a codesandbox demo of updating yaxis values working correctly.
from vue-apexcharts.
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.
from vue-apexcharts.
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.
from vue-apexcharts.
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?
from vue-apexcharts.
No, not expected behavior.
Working example on codesandbox
from vue-apexcharts.
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.
from vue-apexcharts.
Related Issues (20)
- Unable to apply certain styles via annotation cssClass
- Error when zoom in Timeseries charts
- Is it possible to disable automatically scaling HOT 1
- Sort the yaxis label in asc order HOT 1
- vue2 Semi Donut Chart: strange padding left
- Set site-wide defaults (using NPM / module-based JS)
- Is there a way to set gauge chart gradient angle?
- Xaxis tick off placement
- Not so smooth gredient
- Is it possible to fill area chart with different colors between two markers?
- Data labels slow performance HOT 1
- Wrong locale name provided when use pt-br LOCALES HOT 1
- Pie / Donut chart events
- Add nonce as a prop for apexchart wrapper
- Vue apexcharts selecting multiple languages
- implementating apexchart for nuxt HOT 1
- cant change the color fill for radial bars on Angular 14 HOT 2
- Grouped Stacked chart not grouping
- Line Chart Y-Autoscaling not accurate and with duplicated lables, when lables are formated
- Chart type rangeBar, xaxis - datetime, y - numeric (need show hours). Something wrong with tooltip for y values
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-apexcharts.