Page 1 of 1
resizing the chart from the right, not the left
Posted: Sun Aug 07, 2022 5:28 am
by fresh_ny
Hi,
When a browser window is reduced, I'm trying to get my chart to show the far end of the Y axis that shows the current date, rather than point of origin that is shown as the browser window reduces.
Thanks
Re: resizing the chart from the right, not the left
Posted: Mon Aug 08, 2022 3:45 am
by fresh_ny
In this image, as the browser is reduced the most recent data is hidden but the 'originating' or the oldest data is still shown
I'd like to find a way to have the newest data remain.
https://imgur.com/a/Q8VwBeE
Re: resizing the chart from the right, not the left
Posted: Mon Aug 08, 2022 8:42 am
by kamil.m
Hi there,
It is hard to exactly tell what could be wrong with your config. But just by looking at your screenshots, I'm guessing that there might be some issue with your CSS config. Please make sure that the Highcharts container does not have a fixed width - because if it won't be responsive, it won't show you the data "on the right".
Here you can see how it behaves during a resize with a responsive container:
https://jsfiddle.net/BlackLabel/m5xre9hv/
Let me know if CSS was the issue!
Best regards
Re: resizing the chart from the right, not the left
Posted: Tue Aug 09, 2022 6:02 pm
by fresh_ny
It's a bit of a mess. We're trying to integrate the chart with React, and multiple people have worked on it.
There's a app-constant.js which handles the Highcart variables. Here's what the chart info looks like. Width is dynamic. Not sure if that's causing problems?
Code: Select all
chart: {
zoomType: 'xy',
resetZoomButton: {
position: {
align: 'left',
// verticalAlign: 'top', // by default
x: 264,
y: -40
}
},
panning: true,
panKey: 'shift',
height: 800,
width: window.innerWidth * 0.90,
type: "line",
animation: {
duration: 1000
}
},
Re: resizing the chart from the right, not the left
Posted: Wed Aug 10, 2022 7:44 am
by kamil.m
Hi there!
You are right, the
chart.width property sets a fixed chart width - that's why it's not responsive. Simply change it to
chart.spacingRight, set the multiplier to 0.10 (instead of 0.90) and you will get the exact same effect, but with responsiveness included.
DEMO: https://jsfiddle.net/BlackLabel/hpjw8x32/
API Reference: https://api.highcharts.com/highcharts/c ... acingRight
I hope that you fill find it useful,
Regards!
Re: resizing the chart from the right, not the left
Posted: Wed Aug 10, 2022 2:57 pm
by fresh_ny
yes! That works much better than the width variable. It revealed another problem we have with <DIV>s so onto other problems!
spacingRight: window.innerWidth * 0.10,
Re: resizing the chart from the right, not the left
Posted: Wed Aug 10, 2022 6:02 pm
by kamil.m
That's great! In case of any other Highcharts related questions, feel free to ask us.
Good luck with solving those problems!
Re: resizing the chart from the right, not the left
Posted: Thu Aug 11, 2022 12:47 pm
by fresh_ny
I'm trying to find a variable to move the values on the Y axis off to the side of the chart.
https://imgur.com/a/r8SfIRa
I tried ranging it left, but then the values disappeared off the charts.
labels: {
align: 'left',
x: 0,
y: -2
}
I tried adjusting the window width but no luck
spacingRight: window.innerWidth + 0.10,
Re: resizing the chart from the right, not the left
Posted: Thu Aug 11, 2022 1:02 pm
by fresh_ny
There must have been a caching issue. It seems to be working now
labels: {
align: 'left',
x: 8,
y: 4
}
Re: resizing the chart from the right, not the left
Posted: Thu Aug 11, 2022 1:10 pm
by fresh_ny
but I have another question!
I can't work out how to make the chart height dynamic.
Re: resizing the chart from the right, not the left
Posted: Thu Aug 11, 2022 1:30 pm
by kamil.m
Hi there, instead of using
yAxis.labels.x you can use
yAxis.offset to move the whole yAxis (with labels).
And for the height, I would suggest looking at the Stack Overflow topics, like this one:
https://stackoverflow.com/questions/880 ... mic-height
Regards!
Re: resizing the chart from the right, not the left
Posted: Thu Aug 11, 2022 3:11 pm
by fresh_ny
so it looks like the issue is in the container CSS. That sounds about right. Thanks
Re: resizing the chart from the right, not the left
Posted: Thu Aug 11, 2022 4:05 pm
by kamil.m
You're welcome! Do not hesitate to contacts us in case of any further questions.