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

resizing the chart from the right, not the left

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

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: 892
Joined: Thu May 19, 2022 1:33 pm

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

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

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: 892
Joined: Thu May 19, 2022 1:33 pm

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

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

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: 892
Joined: Thu May 19, 2022 1:33 pm

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

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

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

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

but I have another question!

I can't work out how to make the chart height dynamic.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

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

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

so it looks like the issue is in the container CSS. That sounds about right. Thanks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

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

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

Return to “Highcharts Stock”