2 years ago
#66433

texas697
how to sync cursors across multiple chart amchartsv4
I am using amcharts v4.10.20. I am trying to sync cursor movement and zooming across multiple charts. Using examples from the documentation I managed to get the zoom sync to work but having no luck with the cursors.
function syncDateAxes(syncWithAxis) {
for (let i = 0; i < props.chartsRef?.current.length; i += 1) {
const chart = props.chartsRef?.current[i];
const dateAxis = chart.xAxes.getIndex(0);
if (dateAxis && dateAxis !== syncWithAxis) {
try {
dateAxis.events.disableType("selectionextremeschanged");
dateAxis.start = syncWithAxis.start;
dateAxis.end = syncWithAxis.end;
dateAxis.events.enableType("selectionextremeschanged");
} catch (error) {
console.log(error);
}
}
}
}
chart.cursor.adapter.add("cursorPoint", function cursorPoint(point) {
if (
props.chartsRef?.current[0]?.scrollbarX &&
props.chartsRef?.current[0]?.scrollbarX.isBusy
) {
point.y = -1000;
} else if (!chart.cursor.fitsToBounds(point)) {
point.y = 0;
chart.cursor.lineY.visible = false;
const _cursor = chart.yAxes.getIndex(0);
if (_cursor) {
_cursor.cursorTooltipEnabled = false;
}
} else {
chart.cursor.lineY.visible = true;
const _cursor = chart.yAxes.getIndex(0);
if (_cursor) {
_cursor.cursorTooltipEnabled = true;
}
}
return point;
});
xAxis.events.on(
"selectionextremeschanged",
function selectionextremeschanged(event) {
syncDateAxes(event.target);
}
);
I have working demo you can fork. WORKING DEMO
Think different solution could be using these.
https://www.amcharts.com/docs/v4/tutorials/tracking-cursors-position-via-api/
https://www.amcharts.com/docs/v4/tutorials/positioning-xy-cursor-via-api/#Moving_cursor_to_point
UPDATE: So I made some progress and created a fork with changes. FORKED_DEMO
It works but sometimes it errors out with
TypeError: Cannot read properties of null (reading 'push')
javascript
html
reactjs
charts
amcharts4
0 Answers
Your Answer