HighCharts yAxis too much space around big numbers
up vote
2
down vote
favorite
My current chart
Just started using HighCharts. I'm charting a stock price that fluctautes around $1,598 and $1,601 that fluctuates over the course of a day. The changes are all obviously small - but the price is changing - it should not be a straight line. HighCharts seems to just zoom too far out. I've added the startOnTick: false etc. with no luck so far. Is there anything obvious I might be missing?
Options below:
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
javascript highcharts
asked Nov 19 at 17:45
Elliot
6,1102471113
add a comment |
up vote
2
down vote
favorite
My current chart
Just started using HighCharts. I'm charting a stock price that fluctautes around $1,598 and $1,601 that fluctuates over the course of a day. The changes are all obviously small - but the price is changing - it should not be a straight line. HighCharts seems to just zoom too far out. I've added the startOnTick: false etc. with no luck so far. Is there anything obvious I might be missing?
Options below:
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
javascript highcharts
asked Nov 19 at 17:45
Elliot
6,1102471113
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
My current chart
Just started using HighCharts. I'm charting a stock price that fluctautes around $1,598 and $1,601 that fluctuates over the course of a day. The changes are all obviously small - but the price is changing - it should not be a straight line. HighCharts seems to just zoom too far out. I've added the startOnTick: false etc. with no luck so far. Is there anything obvious I might be missing?
Options below:
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
javascript highcharts
asked Nov 19 at 17:45
Elliot
6,1102471113
My current chart
Just started using HighCharts. I'm charting a stock price that fluctautes around $1,598 and $1,601 that fluctuates over the course of a day. The changes are all obviously small - but the price is changing - it should not be a straight line. HighCharts seems to just zoom too far out. I've added the startOnTick: false etc. with no luck so far. Is there anything obvious I might be missing?
Options below:
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
javascript highcharts
javascript highcharts
asked Nov 19 at 17:45
Elliot
6,1102471113
asked Nov 19 at 17:45
Elliot
6,1102471113
asked Nov 19 at 17:45
Elliot
6,1102471113
asked Nov 19 at 17:45
Elliot
6,1102471113
asked Nov 19 at 17:45
Elliot
6,1102471113
6,1102471113
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
accepted
If you set the min option for the y-Axis to a number just below your minimum - in your case perhaps 1595, and have startOnTick to false as you've mentioned, that will essentially 'zoom in' on the graph right away for your desired range given the inputs are within that range.
answered Nov 19 at 18:00
A Zibuda
318
1
Thank you for the answer! If I set the min manually, it does work - I was hoping that I wouldn't need to specify that, but thats trivial so its what I'll do - thanks!!
– Elliot
Nov 19 at 18:26
add a comment |
up vote
0
down vote
Try to set min value of yAxis.
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0,
min: 1550
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
options.yAxis.min=1550;
or you can assign minimal value from response array.
answered Nov 19 at 18:02
Sameer Ahmad
14818
thanks for answer Sameer!! I would vote for yours too if I could (I selected the other answer as it was a couple min earlier)
– Elliot
Nov 19 at 18:27
No problem. I was writing that time :)
– Sameer Ahmad
Nov 19 at 18:29
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
If you set the min option for the y-Axis to a number just below your minimum - in your case perhaps 1595, and have startOnTick to false as you've mentioned, that will essentially 'zoom in' on the graph right away for your desired range given the inputs are within that range.
answered Nov 19 at 18:00
A Zibuda
318
1
Thank you for the answer! If I set the min manually, it does work - I was hoping that I wouldn't need to specify that, but thats trivial so its what I'll do - thanks!!
– Elliot
Nov 19 at 18:26
add a comment |
up vote
0
down vote
accepted
If you set the min option for the y-Axis to a number just below your minimum - in your case perhaps 1595, and have startOnTick to false as you've mentioned, that will essentially 'zoom in' on the graph right away for your desired range given the inputs are within that range.
answered Nov 19 at 18:00
A Zibuda
318
1
Thank you for the answer! If I set the min manually, it does work - I was hoping that I wouldn't need to specify that, but thats trivial so its what I'll do - thanks!!
– Elliot
Nov 19 at 18:26
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
If you set the min option for the y-Axis to a number just below your minimum - in your case perhaps 1595, and have startOnTick to false as you've mentioned, that will essentially 'zoom in' on the graph right away for your desired range given the inputs are within that range.
answered Nov 19 at 18:00
A Zibuda
318
If you set the min option for the y-Axis to a number just below your minimum - in your case perhaps 1595, and have startOnTick to false as you've mentioned, that will essentially 'zoom in' on the graph right away for your desired range given the inputs are within that range.
answered Nov 19 at 18:00
A Zibuda
318
answered Nov 19 at 18:00
A Zibuda
318
answered Nov 19 at 18:00
A Zibuda
318
answered Nov 19 at 18:00
A Zibuda
318
318
1
Thank you for the answer! If I set the min manually, it does work - I was hoping that I wouldn't need to specify that, but thats trivial so its what I'll do - thanks!!
– Elliot
Nov 19 at 18:26
add a comment |
1
Thank you for the answer! If I set the min manually, it does work - I was hoping that I wouldn't need to specify that, but thats trivial so its what I'll do - thanks!!
– Elliot
Nov 19 at 18:26
1
1
Thank you for the answer! If I set the min manually, it does work - I was hoping that I wouldn't need to specify that, but thats trivial so its what I'll do - thanks!!
– Elliot
Nov 19 at 18:26
Thank you for the answer! If I set the min manually, it does work - I was hoping that I wouldn't need to specify that, but thats trivial so its what I'll do - thanks!!
– Elliot
Nov 19 at 18:26
add a comment |
up vote
0
down vote
Try to set min value of yAxis.
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0,
min: 1550
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
options.yAxis.min=1550;
or you can assign minimal value from response array.
answered Nov 19 at 18:02
Sameer Ahmad
14818
thanks for answer Sameer!! I would vote for yours too if I could (I selected the other answer as it was a couple min earlier)
– Elliot
Nov 19 at 18:27
No problem. I was writing that time :)
– Sameer Ahmad
Nov 19 at 18:29
add a comment |
up vote
0
down vote
Try to set min value of yAxis.
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0,
min: 1550
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
options.yAxis.min=1550;
or you can assign minimal value from response array.
answered Nov 19 at 18:02
Sameer Ahmad
14818
thanks for answer Sameer!! I would vote for yours too if I could (I selected the other answer as it was a couple min earlier)
– Elliot
Nov 19 at 18:27
No problem. I was writing that time :)
– Sameer Ahmad
Nov 19 at 18:29
add a comment |
up vote
0
down vote
up vote
0
down vote
Try to set min value of yAxis.
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0,
min: 1550
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
options.yAxis.min=1550;
or you can assign minimal value from response array.
answered Nov 19 at 18:02
Sameer Ahmad
14818
Try to set min value of yAxis.
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0,
min: 1550
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
options.yAxis.min=1550;
or you can assign minimal value from response array.
answered Nov 19 at 18:02
Sameer Ahmad
14818
answered Nov 19 at 18:02
Sameer Ahmad
14818
answered Nov 19 at 18:02
Sameer Ahmad
14818
answered Nov 19 at 18:02
Sameer Ahmad
14818
14818
thanks for answer Sameer!! I would vote for yours too if I could (I selected the other answer as it was a couple min earlier)
– Elliot
Nov 19 at 18:27
No problem. I was writing that time :)
– Sameer Ahmad
Nov 19 at 18:29
add a comment |
thanks for answer Sameer!! I would vote for yours too if I could (I selected the other answer as it was a couple min earlier)
– Elliot
Nov 19 at 18:27
No problem. I was writing that time :)
– Sameer Ahmad
Nov 19 at 18:29
thanks for answer Sameer!! I would vote for yours too if I could (I selected the other answer as it was a couple min earlier)
– Elliot
Nov 19 at 18:27
thanks for answer Sameer!! I would vote for yours too if I could (I selected the other answer as it was a couple min earlier)
– Elliot
Nov 19 at 18:27
No problem. I was writing that time :)
– Sameer Ahmad
Nov 19 at 18:29
No problem. I was writing that time :)
– Sameer Ahmad
Nov 19 at 18:29
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380065%2fhighcharts-yaxis-too-much-space-around-big-numbers%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
