pkwmay
Posts: 3
Joined: Wed Mar 09, 2022 6:33 am

case of scrollPositionX doesn't work

I really appreciate u guys for providing such an awesome library!

I have a problem applying scrollPositionX property in chart.

I am using React Hook useState to control scrollPositionX value,
and want to apply updated state for value of scrollPositionX property.
However, it seems like the updated state isn't applied after the first rendering.

The initial state value of scrollPositionX at the first rendering, it works well.
but when it comes to rendering after update state which used as scrollPositionX,
the scroll position doesn't move according to the updated state value,
and just maintains the previous position that gave at the first time.

When I print the chartOptions that applied on every rendering moment
in order to see if the scrollPositionX value has changed or not,
it got the exact value which is same with the updated state value.

Except for the scrollPositionX property,
other chartOption properties also got the exact values same with the updated state values respectively,
and showed the changed fiture according to the updated states.

I have checked if I gave wrong data type that scrollPositionX cannot read,
but the type is exactly the 'number' not other type..

I cannot figure out where did I made a mistake in this case...

so I am wondering if the scrollPositionX has any condition that cannot apply changed value or something else.

here's my code,

Code: Select all

const initialOptions = {
    chart: {
      type: 'gantt',
      marginTop: 50,
      plotOptions: {
        bar: {
          groupPadding: 0.55,
        },
      },
      scrollablePlotArea: {
        minWidth: 10000,
        opacity: 0,
        scrollPositionX: 0.8,
      },
    },
    yAxis: {
      visible: false,
      grid: {
        borderWidth: 0,
        cellHeight: 15,
      },
    },
    series: [],
    xAxis: [
      {
        currentDateIndicator: { zIndex: 10 },
        labels: {
          style: {
            fontSize: '12px',
          },
        },

        grid: {
          borderWidth: 0,
          cellHeight: 25,
        },
        tickInterval: day,
        dateTimeLabelFormats: { day: '%E' },

        min: Date.UTC(2022, 03, 08),
        max: Date.UTC(2022,12,31)
      },
      {
        grid: {
          borderWidth: 0,
          cellHeight: 15,
        },
        gridLineWidth: 1,
        tickInterval: day * 7,
        tickWidth: 1,
        dateTimeLabelFormats: { week: '%b  %e ' },
      },
    ],
  };
  
  const [chartOptions, setChartOptions] = useState(initialOptions);

  useEffect(() => {
    const tempDataItem = [];

    data.forEach(item => {
      const startDate = new Date(data.start_time);
      const endDate = new Date(data.end_time);

      tempDataItem.push({
        id: `${item.id}`,
        name: data.name,
        color: `${OBJECTIVE_THEME_COLOR[data.objective]}`,
        start: Date.UTC(
          startDate.getFullYear(),
          startDate.getMonth(),
          startDate.getDate()
        ),
        end: Date.UTC(
          endDate.getFullYear(),
          endDate.getMonth(),
          endDate.getDate()
        ),
      });
    });

    const newSeriesData = {
      name: data.objective,
      pointWidth: 8,
      data: tempDataItem,
    };

    setChartOptions({
      ...chartOptions,
      chart: {
        ...chartOptions.chart,
        height: 75 * data.length,
        scrollablePlotArea: {
          ...chartOptions.chart.scrollablePlotArea,
          scrollPositionX: scrollPosition,
        },
      },
      xAxis: [
        {
          ...chartOptions.xAxis[0],
          min: Date.UTC(
            data.timelineStartDate?.getFullYear(),
            data.timelineStartDate?.getMonth(),
            data.timelineStartDate?.getDate()
          ),
          max: Date.UTC(
            data.timelineEndDate?.getFullYear(),
            data.timelineEndDate?.getMonth(),
            data.timelineEndDate?.getDate()
          ),
        },
        { ...chartOptions.xAxis[1] },
      ],
      series: newSeriesData,
    });
  }, [timelineStartDate, scrollPosition]);
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: case of scrollPositionX doesn't work

Hello,

Welcome to our forum and thanks for contacting us with your question!

Could you reproduce the issue in an online editor that I could work on? You can start here: https://codesandbox.io/s/highcharts-react-demo-vcs5b

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
pkwmay
Posts: 3
Joined: Wed Mar 09, 2022 6:33 am

Re: case of scrollPositionX doesn't work

Can I get any solution please?
I am still struggling with this problem.. ;(
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: case of scrollPositionX doesn't work

Hi, sorry for such a long time with no answer.

I have passed the topic on to a person more experienced in React but also does not fully understand what the problem is.
Could you explain step by step how to reproduce the problem?

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Gantt”