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]);