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

How to fix chart size between different data?`

Thu Feb 23, 2023 6:10 am

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: 857
Joined: Tue Jan 24, 2023 11:14 am

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

Thu Feb 23, 2023 7:21 am

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
Jakub
Highcharts Developer

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

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

Thu Feb 23, 2023 5:30 pm

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 836 times
Which looks correct.

Then I change into this data.
Capture2.PNG
Capture2.PNG (105.87 KiB) Viewed 836 times
The rendering looks messed up.

jakub.j
Posts: 857
Joined: Tue Jan 24, 2023 11:14 am

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

Fri Feb 24, 2023 9:42 am

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
Jakub
Highcharts Developer

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

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

Mon Feb 27, 2023 8:07 pm

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: 857
Joined: Tue Jan 24, 2023 11:14 am

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

Tue Feb 28, 2023 7:57 am

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
Jakub
Highcharts Developer

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

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

Tue Feb 28, 2023 3:00 pm

Thanks, I fixed it by just setting the data to empty array first.

jakub.j
Posts: 857
Joined: Tue Jan 24, 2023 11:14 am

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

Wed Mar 01, 2023 7:22 am

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

Best regards
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Gantt”