fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

resizing the chart from the right, not the left

Sun Aug 07, 2022 5:28 am

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

fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: resizing the chart from the right, not the left

Mon Aug 08, 2022 3:45 am

Image

In this image, as the browser is reduced the most recent data is hidden but the 'originating' or the oldest data is still shown

Image

I'd like to find a way to have the newest data remain.

https://imgur.com/a/Q8VwBeE

kamil.m
Posts: 864
Joined: Thu May 19, 2022 1:33 pm

Re: resizing the chart from the right, not the left

Mon Aug 08, 2022 8:42 am

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
Kamil Musiałowski
Highcharts Developer

fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: resizing the chart from the right, not the left

Tue Aug 09, 2022 6:02 pm

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
      }
    },

kamil.m
Posts: 864
Joined: Thu May 19, 2022 1:33 pm

Re: resizing the chart from the right, not the left

Wed Aug 10, 2022 7:44 am

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!
Kamil Musiałowski
Highcharts Developer

fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: resizing the chart from the right, not the left

Wed Aug 10, 2022 2:57 pm

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,

kamil.m
Posts: 864
Joined: Thu May 19, 2022 1:33 pm

Re: resizing the chart from the right, not the left

Wed Aug 10, 2022 6:02 pm

That's great! In case of any other Highcharts related questions, feel free to ask us.

Good luck with solving those problems!
Kamil Musiałowski
Highcharts Developer

fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: resizing the chart from the right, not the left

Thu Aug 11, 2022 12:47 pm

I'm trying to find a variable to move the values on the Y axis off to the side of the chart.

Image

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,

fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: resizing the chart from the right, not the left

Thu Aug 11, 2022 1:02 pm

There must have been a caching issue. It seems to be working now
labels: {
align: 'left',
x: 8,
y: 4
}

fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: resizing the chart from the right, not the left

Thu Aug 11, 2022 1:10 pm

but I have another question!

I can't work out how to make the chart height dynamic.

kamil.m
Posts: 864
Joined: Thu May 19, 2022 1:33 pm

Re: resizing the chart from the right, not the left

Thu Aug 11, 2022 1:30 pm

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!
Kamil Musiałowski
Highcharts Developer

fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: resizing the chart from the right, not the left

Thu Aug 11, 2022 3:11 pm

so it looks like the issue is in the container CSS. That sounds about right. Thanks

kamil.m
Posts: 864
Joined: Thu May 19, 2022 1:33 pm

Re: resizing the chart from the right, not the left

Thu Aug 11, 2022 4:05 pm

You're welcome! Do not hesitate to contacts us in case of any further questions.
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”