christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

How to fix chart size between different data?`

I am using Highcharts Gantt for React. I am using setState to set the data. Between wildly different data, the chart sizes stay the same, so the rendering of the data looks too small or too big. How do I reset this?
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: How to fix chart size between different data?`

We appreciate you reaching out to us with your inquiry.

Could you reproduce this issue in an online editor that I could work on?
Then I will be able to check out your chart and help you.

Here, you've got a simple demo of Highcharts Gantt in React, you can modify it and fork.
https://codesandbox.io/s/highcharts-rea ... ked-spmvyk

Best regards
Jakub
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: How to fix chart size between different data?`

Hi Jakub,

I cannot reproduce it. But here is what's happening. Previously I have this data
Capture1.PNG
Capture1.PNG (28.21 KiB) Viewed 1491 times
Which looks correct.

Then I change into this data.
Capture2.PNG
Capture2.PNG (105.87 KiB) Viewed 1491 times
The rendering looks messed up.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: How to fix chart size between different data?`

Hello,

I tried to reproduce your problem but I couldn't because I don't know what options have you set.
In my case everything works just fine, even if I generate a lot of data using setState.
Demo: https://codesandbox.io/s/highcharts-rea ... ked-7moddy

You can try using yAxis.scrollbar property to enable chart scrolling on yAxis, then only some parts of data will be visible at one time.
See demo: https://codesandbox.io/s/highcharts-rea ... ked-4hkd8t

If this doesn't work for you, I need to see all your chart options so then I will be able to help you.

I hope you will find it useful
Best regards
Jakub
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: How to fix chart size between different data?`

Code: Select all

  const options = {
    title: {
      text: 'Schedule',
    },
    time: {
      useUTC: false,
    },
    yAxis: {
      uniqueNames: true,
    },
    credits: {
      enabled: false,
    },
    tooltip: {
      formatter: tooltipFormatter,
    },
    navigator: {
      enabled: true,
    },
    series: [
      {
        type: 'gantt',
        minPointLength: 5,
        data: props.data,
      },
    ],
  };
Hi, those are all of my chart options.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: How to fix chart size between different data?`

Hey,
Thanks for sending me your options. When I put them in the codesandbox, everything works as expected, but I guess you set chart height to a fixed value either in the chart options or in css, that's why your chart squizes the data.
The best way to fix it should be the yAxis.scrollbar property, try it out for your chart and let me know if it is what you wanted.

Demo: https://codesandbox.io/s/highcharts-rea ... ked-m07q65

If you have any other questions regarding this issue, please send me a working live demo where I can see the problem that you have.

Best regards
Jakub
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: How to fix chart size between different data?`

Thanks, I fixed it by just setting the data to empty array first.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: How to fix chart size between different data?`

You're welcome! In case of any further questions, feel free to contact us again.

Best regards
Jakub

Return to “Highcharts Gantt”